CODEWITHSUNDEEP
javascripthtml
Khaled
Khaled

Reputation: 158

Split an text into single words, each on a line, with javascript

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

Upvotes: 0

Views: 751

Answers (5)

Mouser
Mouser

Reputation: 13294

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:

Upvotes: 1

Namaskar
Namaskar

Reputation: 2109

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>

Upvotes: 0

Hassan Imam
Hassan Imam

Reputation: 22524

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>

Upvotes: 0

Rex
Rex

Reputation: 521

This should work

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

Upvotes: 0

Dij
Dij

Reputation: 9808

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>

Upvotes: 1

Related Questions