Programming Snippet

I think I can get the folder name from the browse folder dialog. But I can't do that because of a security reason . So how can I get the folder name. You can create the folder's tar file by 7z command . Then fire the browse folder dialog. Now, you can get the folder's tar file name from the input element. <html> <head> <title>show a browse folder dialog to select all files in a specified directory recursively in JavaScript</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body style="background:lightgray"> <p>Click the button to test:</p> <input type="file" id="fileUpload" directory webkitdirectory multiple> </br> <textarea id="edit" style="height:200px;width:240px"> Click the select file button to select files, then show the select file names. </textarea> <script> $...

<html> <head> <title>show a open old file dialog to select files in JavaScript</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body style="background:lightgray"> <p>Click the button to test:</p> <input type="file" id="fileUpload" multiple> </br> <textarea id="edit" style="height:200px;width:240px"> this is a test </textarea> <script> $('input[type=file]').change(function () { var text=""; for(var i=0;i<this.files.length;i++){ text+=this.files[i].name+"\n"; } $('#edit').val(text) }) </script> </body> </html>

<html> <head> <title>capitalize the first letter of string in JavaScript</title> </head> <body style="background:lightgray"> <p>Click the button to test:</p> <button onclick="test()">Capitalize the first letter of string</button> </br> <textarea id="edit" style="height:200px;width:240px"> this is a test </textarea> <script> function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); } function test() { var text=document.getElementById("edit").value; document.getElementById("edit").value=capitalizeFirstLetter(text); } </script> </body> </html>

<html> <head> <title>an array contains a object using javascript</title> </head> <body style="background:lightgray"> <p>Click the button to test:</p> <button onclick="test()">clear array</button> </br> <input id="item" type="text" value="a"/> </br> <textarea id="edit" style="height:200px;width:240px"> </textarea> <script> var arr=["a","b","c"]; function test() { var val=document.getElementById("item").value; var text=""; if(contains(arr,val)){ text="["+arr+"] contains "+val; }else{ text="["+arr+"] not contains "+val; } document.getElementById("edit").value+='\n'+text; } function contains(arr,item) { return arr.indexOf(item)>-1; } document.getElemen...

<html> <head> <title>clear an array using javascript</title> </head> <body style="background:lightgray"> <p>Click the button to test:</p> <button onclick="test()">clear array</button> </br> <textarea id="edit" style="height:200px;width:240px"> </textarea> <script> var arr=[1,2,3]; function test() { clearArray(arr); document.getElementById("edit").value=arr; } function clearArray(arr) { arr.length=0; } document.getElementById("edit").value=arr; </script> </body> </html>

<html> <head> <title>add element to another element using javascript</title> </head> <body style="background:lightgray"> <p>Click the button to test:</p> <button onclick="test()">add p element into a div element</button> </br> <textarea id="edit" style="height:200px;width:240px"> <p>hello world<span>!</span></p> </textarea> <script> function test() { var el = document.createElement( 'body' ); var edit= document.getElementById("edit"); var div= document.createElement( 'div' ); div.innerHTML =edit.value; addElement(el,div); edit.value=el.innerHTML; } function addElement(father,child) { father.appendChild(child); } </script> </body> </html>

<html> <head> <title>remove element by tag name using javascript</title> </head> <body style="background:lightgray"> <p>Click the button to test:</p> <button onclick="test()">remove p element</button> </br> <textarea id="edit" style="height:200px;width:240px"> <body> <p>hello world<span>!</span></p> </body> </textarea> <script> function test() { var el = document.createElement( 'html' ); var edit= document.getElementById("edit"); el.innerHTML =edit.value; removeElementByTagName(el,"p"); edit.value=el.innerHTML; } function removeElementByTagName(el,tagName) { var elements=el.getElementsByTagName( tagName ); while (elements[0]) elements[0].parentNode.removeChild(elements[0]); } </script> </body> </html>

<html> <head> <title>remove blank lines using javascript</title> </head> <body style="background:lightgray"> <p>Click the button to test:</p> <button onclick="test()">remove blank lines</button> </br> <textarea id="edit" style="height:200px;width:240px"> line 1 line 2 line 3 </textarea> <script> function test() { var edit= document.getElementById("edit"); edit.value=removeBlankLines(edit.value); } function removeBlankLines(text) { return text.replace(/^\s*[\r\n]/gm,""); } </script> </body> </html>

<html> <head> <title>show html preview in a frame using javascript</title> </head> <body style="background:lightgray"> <p>Click the button to test:</p> <button onclick="populateIframe()">Preview</button> </br> <textarea id="edit" style="height:200px;width:200px"> <html> <body> hi </body> </html> </textarea> </br> <iframe id="frame"> </iframe> <script> function populateIframe() { var ifrm = document.getElementById("frame"); ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument; ifrm.document.open(); var content=document.getElementById("edit").value; ifrm.document.write(content); ifrm.document.close();} populateIframe(); </script> </body> </html...

<html> <head> <title>toggle a element by id using javascript</title> </head> <body style="background:lightgray"> <p>Click the button to test:</p> <button onclick="toggle('hideMe')">Show/hide</button> <div id="hideMe">I want to hide this by pressing the button above</div> <script> function toggle(id) { var e = document.getElementById(id); if (e.style.display == "block" || e.style.display=="") { e.style.display = "none"; } else { e.style.display = "block"; } } </script> </body> </html>

<html> <head> <title>append html to end of body using javascript</title> </head> <body style="background:lightgray"> <p>Click the button to test:</p> <button onclick="appendHTMLToBody('<p>hello</p>')">append paragraph</button> <script> function appendHTMLToBody(html){ document.body.innerHTML+=html; } </script> </body> </html>

<html> <head> <title>remove a button by click itself</title> </head> <body style="background:lightgray"> <p>Click the button to test:</p> <button onclick="remove()">remove me</button> </body> </html>

<html> <head> <title>add,remove,slice items from an array in javascript</title> </head> <body style="background:lightgray"> <p>Click the button to test:</p> <button onclick="push(8)">add</button> <button onclick="pop()">remove</button></br> <button onclick="slice(2,3)">extract the second and the third elements from the array</button></br> <button onclick="slice(2,4)">extract the second and the third and the fourth elements from the array</button> </br> <textarea style="width: 400px;height: 200px;"id="demo"></textarea> <script> var arr=[1,2,3,4]; function push(item) { arr.push(item); document.getElementById("demo").innerHTML =arr; } function pop() { arr.pop(); document.getElementById("demo").innerHTML =arr; } function slice(a,b) { var citrus = arr.slice(a-1,b); ...

<html> <head> <title>set and get attribute in javascript</title> </head> <body style="background:lightgray"> <p>Click the button to test:</p> <button onclick="getBackground()">Get background</button> <button onclick="setBackgroundAsRed()">Set background as red</button> </br> <textarea style="width: 400px;height: 200px;"id="demo"></textarea> <script> function getBackground() { document.getElementById("demo").innerHTML =document.body.getAttribute("style"); } function setBackgroundAsRed() { document.body.setAttribute("style","background:red"); } </script> </body> </html>

<html> <head> <title>randomize an array in javascript</title> </head> <body> <p>Click the button to test:</p> <button onclick="myFunction()">Randomize an array</button> </br> <textarea style="width: 400px;height: 200px;"id="demo"></textarea> <script> var arr=[1,9,7,5,4]; function myFunction() { shuffle(arr); document.getElementById("demo").innerHTML =arr; } document.getElementById("demo").innerHTML=arr; function shuffle(array) { var currentIndex = array.length, temporaryValue, randomIndex ; // While there remain elements to shuffle... while (0 !== currentIndex) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; // And swap it with the current element. temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = tempora...

<html> <head> <title>generate random integer in javascript</title> </head> <body> <p>Click the button to test:</p> <button onclick="myFunction()">Generate random integer</button> </br> <textarea style="width: 400px;height: 200px;"id="demo"></textarea> <script> function myFunction() { document.getElementById("demo").innerHTML =generateRandomInt(1,10); } //generate a random number between min(include) and max(include) function generateRandomInt(min,max) { return Math.floor((Math.random() * max) + min); } </script> </body> </html>

The key is The string you assign to the variable "el.innerHTML" can't contain double quotes character . You can convert the double quotes character to a single quote character. If you assign the html string inside a textarea, it will convert < character to &lt; string and convert > character to &gt; string automatically. So you have to convert these characters back to <,> character. You have to convert the html string to a single line. If the html string has multiple lines with a \n character. <html> <head> <title>parse a html string in javascript</title> </head> <body> <p>Click the button to test:</p> <button onclick="myFunction()">Result</button> </br> <textarea style="width: 400px;height: 200px;"id="demo"><html><head><title>titleTest</title></head><body><a href='test0'>test01</a>...

<html> <head> <title>multi lines to one line in javascript</title> </head> <body> <p>Click the button to test:</p> <textarea id="demo"></textarea> <button onclick="myFunction()">Result</button> <script> var text="line1\nline2"; document.getElementById("demo").innerHTML = text; function myFunction() { var str = document.getElementById("demo").innerHTML; var res = text.replace(/\n/g, ''); document.getElementById("demo").innerHTML = res; } </script> </body> </html>

How to change the file extension of a download file? You can modify the second parameter type of the Blob class to any MIME type. A MIME type is mapping a suffix. The suffix is the file extension. Reference the MIME type list to find the suffix that you want to changed. <html> <head> <title>load save file using html5</title> </head> <body> <table> <tr><td>Text to Save:</td></tr> <tr> <td colspan="3"> <textarea id="inputTextToSave" style="width:512px;height:256px"></textarea> </td> </tr> <tr> <td>Filename to Save As:</td> <td><input id="inputFileNameToSaveAs"></input></td> <td><button onclick="saveTextAsFile()">Save Text to File</button></td> </tr> <tr> <td>Select a File to Load:</td> <td><input type="file...