-1

Using Javascript I have the following issue, when displaying data on a web page.

The code goes like this:

myString.replace('\n', '<br/>');

I suppose the purpose is clear, I want to replace the '\n' linefeed marker by the < br / > tag, doing the same thing but in HTML.

The problem is:

Starting with the string: abc\nXYZ instead of getting abc< br />XYZ like I would expect, I end up with abc & lt;br/& gt;XYZ. This is of course not what I want, because the effect is not the same.

What is the proper work around?

Michel
  • 10,303
  • 17
  • 82
  • 179
  • Possible duplicate of [How to replace all occurrences of a string in JavaScript?](https://stackoverflow.com/questions/1144783/how-to-replace-all-occurrences-of-a-string-in-javascript) – Ashraf Sep 27 '18 at 03:36
  • 2
    `"abc\nXYZ".replace('\n', '
    ');` gives me `"abc
    XYZ"` when I log the result in the console. Why do you think you get `abc & lt;br/& gt;XYZ` ? Are you doing anything else after?     – Ben Lorantfy Sep 27 '18 at 03:42
  • I suppose this is because your console interpretes < as < and > as >. I also get this on my web page, but if I look in the source of the page I see abc<br/>XYZ. I should see abc
    XYZ in the source and a jump to the next line in the web page.     – Michel Sep 27 '18 at 03:47
  • javascript do not treat `<` differently AFAIK, so it should not get `&lt`. – apple apple Sep 27 '18 at 03:49
  • @Ashraf This is not a duplicate. String replacement works fine. The issue here is about the special handling of the characters < and >. – Michel Sep 27 '18 at 03:53
  • @apple apple I am working with Node.js and express. Could that be the issue. – Michel Sep 27 '18 at 03:56
  • @Michel the problem was with escaping the backslash. – Moltres Sep 27 '18 at 03:57
  • @Michel not sure about express, but if it convert `<` to `&lt`. I think it would also convert `\n` to `
    `. so this conversion may not be needed at all.     – apple apple Sep 27 '18 at 03:59
  • Added the correct answer @Michel . Maybe you weren't finishing the function properly. – Moltres Sep 27 '18 at 11:22
  • No unfortunately the`\n` is not converted to `
    `.     – Michel Sep 27 '18 at 16:35
  • Must be browser problem then, works for me – Moltres Sep 28 '18 at 02:40

2 Answers2

0

Get the inner HTML and then str.replace("\n", "<br/>") and put it back into the inner HTML. I've attached a code snippet of the working demo.

function myFunction() {
  var str = document.getElementById("demo").innerHTML;
  var res = str.replace("\n", "<br/>");
  document.getElementById("demo").innerHTML = res;
}
<!DOCTYPE html>
<html>

<body>

  <p>Click the button to replace carriage returns with line-break in the paragraph below:</p>

  <p id="demo">Visit 
  Stack Overflow!</p>

  <button onclick="myFunction()">Try it</button>

</body>

</html>
Moltres
  • 600
  • 4
  • 21
  • 1
    OP is using substring matching, not regex matching. and does not mentioning any global matching problem. – apple apple Sep 27 '18 at 03:51
  • Thank you for pointing it out. Made the required adjustments. @appleapple – Moltres Sep 27 '18 at 03:55
  • Using: myString.replace("\\n", "
    ") does not work. I tried it. It puts a jump to the next line in the source of the page, but no jump in the page itself. I want the jump to happen on the page.     – Michel Sep 27 '18 at 04:10
  • @Michel I didn't exactly understand what "jump on the page itself" meant, could you please explain what you're trying to achieve? – Moltres Sep 27 '18 at 04:45
  • To replace newlines (which would only be there in the source, not on the rendered page) with `
    ` tags that would put a line break in the actual page. Replacing `"\\n"` will NOT catch new lines - it would catch the literal sequence `\n` so a text where the *content* is, say `previous\next` (a string literal of `"previous\\next"`) will be turned into `previous
    ext` because the real to represent a new line is via the string literal sequence `"\n"` which then gets turned into a new line. If you do `myString = "line1\nline2"` and then try your proposal, you'd see it doesn't work.     – VLAZ Sep 27 '18 at 05:03
  • It means go to the next line. Like when you use "
    " in some of your HTML code. I am trying to replace "\n" by "
    " so that when displayed on the web page it produces a line break.     – Michel Sep 27 '18 at 05:05
  • Understood the question, sorry for the wrong answer. – Moltres Sep 27 '18 at 06:35
  • 1
    Thanks for the snippet, but I do not want to click a button. I found it finally simpler to deal with it using express/ejs. – Michel Oct 04 '18 at 01:11
  • Not a problem, glad I could help somewhat – Moltres Oct 04 '18 at 05:25
0

The problem here is the \n is being replaced by the string version of the <br/> tag, meaning, the way HTML translates it so that < and > show up instead of functioning as a tag.

What you should do is obtain the HTML and replace the section within that. Something like this:

var myDiv = Document.getElementById('my-div');
var myDivContent = myDiv.innerHTML;
myDiv.innerHTML = myDivContent.replace("\\n", "<br/>");
Jaime Rojas
  • 549
  • 2
  • 6
  • This solution though more complicated than I would like, I am willing to try it but when I try I get this error: "Document is not defined". What should I do? I am using express with node.js. – Michel Sep 27 '18 at 06:15
  • Oh, so you're using `Node JS`, so back end javascript. The `Document` is part of the DOM, so it won't work in this case. How exactly are you returning this string to the client? – Jaime Rojas Sep 27 '18 at 13:48
  • I gave up challenging this path. It is much easier to just handle the problem using express. Just cutting the string into pieces. – Michel Sep 27 '18 at 17:30