使用javascript将文本拆分成单个单词，每个单词一行

Question

I wrote this code, with javascript incorporated in html, in order to split the entered text in the input area into single words, each on a line:

 function convertToWords() { var MyVar; MyVar = document.getElementById("demo"); console.log(MyVar.value.replace(/ /g, "\\n")); var x = document.getElemenyById("myDiv"); x.innerHTML = MyVar.value.replace(/ /g, "\\n"); } 

 <input type="text" value="" id="demo" style="width:100%; height:100px"> </input> <input type="button" value="Convert to single words" onclick="convertToWords();"> </input> <br> <div id="myDiv"></div> 

My question, how to let the result be in html for example in a div instead just only as console log?

I tried the highlighted code in the image, but doesnt work :(

Thanks for any help

Answer 1

You have a typo in your function name: getElementById instead of getElemenyById . Also as everybody else suggest, you can use a <br> to put it on a new line.

However look at this solution, it uses more robust coding.

• \\s as the regex, it splits on all whitespaces. Use this site a nice reference http://www.regular-expressions.info/tutorial.html and https://regex101.com/ to test your regex.
• split , it turns the words into an array. So you can do all kinds tricks with it.
• then in the loop, we build block level ( div ) elements (which are by default placed on a new line) and append them to the result div.

 //lets improve this: use eventlisteners instead of inline events document.querySelector("input[type='button']").addEventListener("click", convertToWords, false); //using document.querySelector to select the input button based on its node name and type. // then add a click event to it that refers to convertToWords. function convertToWords() { var MyVar; MyVar = document.getElementById("demo"); var resultDiv = document.getElementById("myDiv"); //try to use descriptive names. // the use of <br> is not really nice, it works, but this is cleaner var wordArray = MyVar.value.split(/\\s/); //using \\s to split on all white spaces wordArray.forEach(function(element){ //loop over every entry in the array using foreach var node = document.createElement("div"); //create a block node element; node.textContent = element; //fill div with the text entry. resultDiv.appendChild(node); //set node to the result div }); } 

 <input type="text" value="" id="demo" style="width:100%; height:100px" /> <input type="button" value="Convert to single words" /> <br> <div id="myDiv"></div> 

Functions used that are interesting to get familiar with:

• document.querySelector
• Array.prototype.forEach
• document.createElement
• addEventListener

Answer 2

you can use <br> instead of \\n

 function convertToWords() { var MyVar; MyVar = document.getElementById("demo"); var x = document.getElementById("myDiv"); x.innerHTML = MyVar.value.replace(/ /g, "<br/>"); } 

 <input type="text" value="" id="demo" style="width:100%; height:100px"> </input> <input type="button" value="Convert to single words" onclick="convertToWords();"> </input> <br> <div id="myDiv"></div> 

Answer 3

Use <br> instead of \\n to break line in html.

 function convertToWords() { var MyVar = document.getElementById("demo"); //console.log(MyVar.value.replace(/ /g, "\\n")); var x = document.getElementById("myDiv"); x.innerHTML = MyVar.value.replace(/ /g, "<br>"); } 

 <input type="text" value="" id="demo" style="width:100%; height:100px"> <input type="button" value="Convert to single words" onclick="convertToWords();"> <br > <div id="myDiv"></div> 

Answer 4

Since the browser doesn't care about \\n , you can replace the match (a space) with a break.

 document.getElementById("input").addEventListener('keyup', function(e) { document.getElementById("output").innerHTML = e.target.value.replace(/\\s/g, "<br/>"); }); 

 <input type="text" id="input"> <div id="output"></div> 

Answer 5

这应该工作

 x.innerHTML = MyVar.value.replace(/ /g, "<br />");