Converting \n to <br/>

85
April 20, 2018, at 4:36 PM

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 foos with bars 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 \ns 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>

READ ALSO
Program to compute Square sum [on hold]

Program to compute Square sum [on hold]

Complete the squareSum/square_sum/SquareSum method so that it squares each number passed into it and then sums the results together

82
Affecting one object in array p5.js - Javascript

Affecting one object in array p5.js - Javascript

Using p5 libraries, with p5 editorI'm trying to change the colour of a 'bubble' in an array of 'bubbles' however, when I click on a bubble it changes all of the bubbles colours

96
vueJS life cycle with canvas, switching components

vueJS life cycle with canvas, switching components

Im having some trouble displaying vue components containing a canvas with different behaviors

136
Session variables in ExpressJS

Session variables in ExpressJS

I am a web developer with a PHP background that moved recently to JS

107