将\\ n转换为<br/>

Question

I'm having problem converting \\n to a < br / >

 function format() { var text = document.getElementById("formatArea").value; text.replace("\\n", "<br/>"); document.getElementById("resultArea").value = text; } 

 <textarea rows="20" cols="80" id="formatArea"> </textarea> <textarea rows="20" cols="80" id="resultArea"> </textarea> <button onclick="format()">Click to create HTML breaks</button> 

Appreciate any help, i'm not very experienced in JS yet.

Answer 1

You have 2 issues here.

Firstly, replace does not change the original string, it returns a modified string. (Documentation link : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace )

Secondly, if you put a string in the first parameter of replace, it will only replace the first occurence. If you want to replace them all, use a Regular Expression.

So you should have this :

function format() {
  var text = document.getElementById("formatArea").value;
  text = text.replace(/\n/g, "<br/>");
  document.getElementById("resultArea").value = text;
}

The g ("global") flag on a regular expression is used to match all occurences.

Answer 2

Replace all was something I didn't understand when I started learning JavaScript too!

TL;DR There isn't a replaceAll function in JavaScript. But replace accepts something called regular expressions .

To replace all foo s with bar s in a string you have to do .replace(/foo/g, "bar") . /foo/g will match all the "foo" s and will replace them with bar. g is called flag and it it means global , meaning you match them all.

If you want to replace \\n s you have to do: .replace(/\\n/g, "<br/>") , like we did for foo :

text = text.replace(/\n/g, "<br/>")

Also, you have to assign the new string to the old string, as replace would not modify the original variable value:

 function format() { var text = document.getElementById("formatArea").value; text = text.replace(/\\n/g, "<br/>"); document.getElementById("resultArea").value = text; } 

 <textarea rows="20" cols="80" id="formatArea"> </textarea> <textarea rows="20" cols="80" id="resultArea"> </textarea> <button onclick="format()">Click to create HTML breaks</button> 

Answer 3

Use /\\n/g for global replace and you have also missed the assignment of the changed text value in text itself, thus the replaced text was not taking effect. You need to assign the replaced value like text = text.replace(/\\n/g, "<br/>"); :

 function format() { var text = document.getElementById("formatArea").value; text = text.replace(/\\n/g, "<br/>"); document.getElementById("resultArea").value = text; } 

 asd 

 <textarea rows="20" cols="80" id="formatArea"> </textarea> <textarea rows="20" cols="80" id="resultArea"> </textarea> <button onclick="format()">Click to create HTML breaks</button>