4

I'm struggling with some syntax, mostly why the data-attribute(HTML5) is affecting the text in the way it is.

Please consider this example which does what is expected

<div id="s"></div>    

<script>

var ele = document.getElementById("s");
var txt = "this is it \n and done";
ele.innerText = txt;

</script>

The result is I see 2 lines in HTML due to the \n. This is expected

The task means I need to change the way we work into 

<div id="s" data-txt="this is it\nand done"></div>

<script>

var ele = document.getElementById("s");
var txt = ele.getAttribute("data-txt"); 
ele.innerText = txt;

</script>

Note we're now using the data attribute of data-txt. The issue is this renders the text verbatim, meaning I see 1 line: this is it\nand done

https://jsfiddle.net/he4ydvva/

The fact I can't even use replace (ele.getAttribute("data-txt").replace('\n','blah');) suggests that although I see \n, the computer is reading something different (maybe the charcode value or similar)

Why does this happen and how do I prevent it?

Edit

I have seen How can I insert new line/carriage returns into an element.textContent? but this won't suffice as I need the string to exist within the data-txt and concatenating as "this is " + String.fromCharCode(13) + " is not valid for HTML5

Community
  • 1
  • 1
Dave
  • 8,163
  • 11
  • 67
  • 103
  • 2
    It would appear that the rendering engine takes the `\n` and converts it into a `
    ` in the first case, however since the page has already been drawn in the second example the literal text is used.     – Travis J May 19 '16 at 08:29
  • 1
    `\n` is second case is literal slash and n not a new line. https://jsfiddle.net/he4ydvva/1/ – jcubic May 19 '16 at 08:30
  • Related question: http://stackoverflow.com/questions/1219860/html-encoding-in-javascript-jquery – p4sh4 May 19 '16 at 08:32
  • So what is it that you're actually trying to achieve? Do you want to set the inner text of a tag using javascript that includes a newline? If `innerText` (non standard anyway) doesn't work, use `innerHTML`, `textContent` or `document.createTextNode`. Do you want to read text from a data-attribute which includes a newline? Then actually *include* a newline character in that data-attribute. `\n` in html is not the same as in javascript (see jcubics comment). – Yoshi May 19 '16 at 08:35

2 Answers2

3

Here's what you should use:

ele = document.getElementById("t");
txt = ele.getAttribute("data-txt").replace(/\\n/g,'<br>'); 
ele.innerHTML = txt;

Explanation: The \ char is an escape character and so to specify a new line, you need to use two \\ so that the 1st one escapes the meaning of the second. The second one is then treated as a normal char and is read together with the n as \n.
Further, you must replace that with a <br> because a browser will not respect CRLF chars.

Here is your example on jsfiddle fixed: https://jsfiddle.net/4eurrzgx/

    
    var ele = document.getElementById("s");
    var txt = "this is it \n and done";
    ele.innerText = txt;
    
    
    ele = document.getElementById("t");
    txt = ele.getAttribute("data-txt").replace(/\\n/,'<br>'); 
    ele.innerHTML = txt;
    
 <div id="s"></div>
 <p>
 ***
 </p>
 <div id="t" data-txt="this is it\nand done"></div>
nosh
  • 600
  • 4
  • 16
3

You are confusing HTML with JavaScript.

\n is a JavaScript character. data-* attributes are HTML. For inserting newline in HTML, you should use the HTML entity &#10; (Newline) or &#13; (carriage return) or their combination.

HTML doesn't understand \n, \r and so on.

Also note,

<div>This is a line \n Another one</div>

This won't insert newline but the code below will:

<div>This is a line &#10; Another one</div>

Check out the full list of HTML entities

Akshay Arora
  • 1,953
  • 1
  • 14
  • 30
  • `You are confusing HTML with JavaScript.` - That was the type of answer I was looking for. Very clear, thanks – Dave May 19 '16 at 09:50
  • My general opinion is to use `
    ` and not the CRLF chars because it allows for predictable behavior with the css `white-space` attribute. If you are using this method, do take a look at this as well http://www.w3schools.com/cssref/pr_text_white-space.asp. eg: the code above will be disrupted by the style `white-space: nowrap;`     – nosh May 19 '16 at 11:08