How can I insert new line/carriage returns into an element.textContent?
Solution 1
I know this question posted long time ago.
I had similar problem few days ago, passing value from web service in json
format and place it in table
cell
contentText
.
Because value is passed in format, for example, "text row1\r\ntext row2"
and so on.
For new line in textContent
You have to use \r\n
and, finally, I had to use css white-space: pre-line;
(Text will wrap when necessary, and on line breaks) and everything goes fine.
Or, You can use only white-space: pre;
and then text will wrap only on line breaks (in this case \r\n
).
So, there is example how to solve it with wrapping text only on line breaks :
var h1 = document.createElement("h1");
//setting this css style solving problem with new line in textContent
h1.setAttribute('style', 'white-space: pre;');
//add \r\n in text everywhere You want for line-break (new line)
h1.textContent = "This is a very long string and I would like to insert a carriage return \r\n...";
h1.textContent += "moreover, I would like to insert another carriage return \r\n...";
h1.textContent += "so this text will display in a new line";
document.body.appendChild(h1);
Solution 2
I ran into this a while ago. I found a good solution was to use the ASCII representation of carriage returns (CODE 13). JavaScript has a handy feature called String.fromCharCode()
which generates the string version of an ASCII code, or multiple codes separate by a comma. In my case, I needed to generate a CSV file from a long string and write it to a text area. I needed to be able to cut the text from the text area and save it into notepad. When I tried to use the <br />
method it would not preserve the carriage returns, however, using the fromCharCode method it does retain the returns. See my code below:
h1.innerHTML += "...I would like to insert a carriage return here..." + String.fromCharCode(13);
h1.innerHTML += "Ant the other line here..." + String.fromCharCode(13);
h1.innerHTML += "And so on..." + String.fromCharCode(13);
h1.innerHTML += "This prints hello: " + String.fromCharCode(72,69,76,76,79);
See here for more details on this method: w3Schools-fromCharCode()
See here for ASCII codes: ASCII Codes
Solution 3
nelek's answer is the best one posted so far, but it relies on setting the css value: white-space: pre, which might be undesirable.
I'd like to offer a different solution, which tries to tackle the real question that should've been asked here:
"How to insert untrusted text into a DOM element?"
If you trust the text, why not just use innerHTML?
domElement.innerHTML = trustedText.replace(/\r/g, '').replace(/\n/g, '<br>');
should be sufficient for all the reasonable cases.
If you decided you should use .textContent instead of .innerHTML, it means you don't trust the text that you're about to insert, right? This is a reasonable concern.
For example, you have a form where the user can create a post, and after posting it, the post text is stored in your database, and later on appended to pages whenever other users visit the relevant page.
If you use innerHTML here, you get a security breach. i.e., a user can post something like
[script]alert(1);[/script]
(try to imagine that [] are <>, apparently stack overflow is appending text in unsafe ways!)
which won't trigger an alert if you use innerHTML, but it should give you an idea why using innerHTML can have issues. a smarter user would post
[img src="invalid_src" onerror="alert(1)"]
which would trigger an alert for every other user that visits the page. Now we have a problem. An even smarter user would put display: none on that img style, and make it post the current user's cookies to a cross domain site. Congratulations, all your user login details are now exposed on the internet.
So, the important thing to understand is, using innerHTML isn't wrong, it's perfect if you're just using it to build templates using only your own trusted developer code. The real question should've been "how do I append untrusted user text that has newlines to my HTML document".
This raises a question: which strategy do we use for newlines? do we use [br] elements? [p]s or [div]s?
Here is a short function that solves the problem:
function insertUntrustedText(domElement, untrustedText, newlineStrategy) {
domElement.innerHTML = '';
var lines = untrustedText.replace(/\r/g, '').split('\n');
var linesLength = lines.length;
if(newlineStrategy === 'br') {
for(var i = 0; i < linesLength; i++) {
domElement.appendChild(document.createTextNode(lines[i]));
domElement.appendChild(document.createElement('br'));
}
}
else {
for(var i = 0; i < linesLength; i++) {
var lineElement = document.createElement(newlineStrategy);
lineElement.textContent = lines[i];
domElement.appendChild(lineElement);
}
}
}
You can basically throw this somewhere in your common_functions.js file and then just fire and forget whenever you need to append any user/api/etc -> untrusted text (i.e. not-written-by-your-own-developer-team) to your html pages.
usage example:
insertUntrustedText(document.querySelector('.myTextParent'), 'line1\nline2\r\nline3', 'br');
the parameter newlineStrategy accepts only valid dom element tags, so if you want [br] newlines, pass 'br', if you want each line in a [p] element, pass 'p', etc.
Solution 4
You could use regular expressions to replace the '\n' or '\n\r' characters with '<br />'.
you have this:
var h1 = document.createElement("h1");
h1.textContent = "This is a very long string and I would like to insert a carriage return HERE...
moreover, I would like to insert another carriage return HERE...
so this text will display in a new line";
you can replace your characters like this:
h1.innerHTML = h1.innerHTML.replace(/\n\r?/g, '<br />');
check the javascript reference for the String and Regex objects:
http://www.w3schools.com/jsref/jsref_replace.asp
http://www.w3schools.com/jsref/jsref_obj_regexp.asp
Solution 5
You can concatenate the strings...
h1.innerHTML += "...I would like to insert a carriage return here...<br />";
h1.innerHTML += "Ant the other line here... <br />";
h1.innerHTML += "And so on...<br />";
Related videos on Youtube
user1236489
Updated on May 09, 2022Comments
-
user1236489 about 2 years
As silly as it may sound, I still haven't found an appropriate answer.
Let's say I want to dynamically create a new DOM element and fill up its textContent/innerText with a JS string literal.
The string is so long I would like to split it into three chunks:var h1 = document.createElement("h1"); h1.textContent = "This is a very long string and I would like to insert a carriage return HERE... moreover, I would like to insert another carriage return HERE... so this text will display in a new line";
The problem is, if i write
h1.textContent = "...I would like to insert a carriage return here... \n";
it doesn't work, probably because the browser considers the '\n' to be pure text and displays it as such (the \r doesn't work either).
On the other hand, I could change the h1.innerHTML instead of the textContent and write:
h1.innerHTML = "...I would like to insert a carriage return here...<br />";
Here the <br /> would do the job, but doing so would replace not just the text content but all the HTML content of my h1, which is not quite what I want.
Is there a simple way to solve my problem?
I wouldn't resort to creating multiple block elements just to have the text on different lines.
Any idea would be greatly appreciated.
Thanks in advance.-
kennebec about 12 yearsThe trouble with inserting breaks in a heading element is you cannot be sure that the heading will not also wrap at other places, especially if the viewport is small.
-
Ciro Santilli OurBigBook.com almost 10 yearsWhy do you want to add the newlines? Do you want to see rendered lines break or not?
-
-
Jan Hudec almost 9 yearsThis is just plain wrong, On many levels. 13 is carriage return. It can be equivalently written as
'\r'
('\r' === String.fromCharCode(13)
gives true). Unless you are on Classic Mac, it is the wrong character for newline. Newline is ASCII 10, or'\n'
. However in HTML the only newline is<br/>
. Both\r
and\n
are rendered as space except in<pre>
. TheinnerText
andinnerHtml
however convert both characters to<br/>
for convenience, so it happens to work. I have not checked the specification whether it works by design (and I would not believe that much). -
StanE over 7 yearsOld answer and I might be wrong, but how does this solve the question? I have the same problem and the question was about using
textContent
, notinnerHTML
. -
StanE over 7 yearsLol, this answer is the ONLY correct answer to the question, but it is under-voted and had no comments until now... It seems that people here can't read correctly. The question was about using
textContent
. Using CSS is an alternative way to solve it (maybe the cleanest). So perfect answer. Thank you! -
nelek over 7 yearsas you can see, if you read question again, it's not about
innerHTML
buttextContent
... user doesn't have problem withinnerHTML
... so, how this solution is correct? All solutions are based oninnerHTML
but none oftextContent
... they are not the same. -
Slogmeister Extraordinaire over 7 yearsI didn't think the problem was solvable using textContent, so instead of providing evidence and documentation proving the problem could not be solved, I provided an alternative. In my opinion, questions are useless without answers, and often the answer is not where we think it is.
-
nelek over 7 yearsWhy isn't solvable? Imagine this: I want to set
contenteditable
fordiv
element (now it's no matter why)... how You gonna solve this problem with new line usingjavascript
? And, what is the purpose ofinnerHTML
in that case? That's why some people usetextContent/innerText
and everything aboutinnerHTML
doesn't have any purpose anymore. That is the point abouttextContent/innerText
. And, anyway, like You can see, it's solvable. -
Valid almost 7 yearsFor the specific situation of copying text to the clipboard, this works perfectly in all the browsers I have tested. Using '\n' gives varied results depending on the browser.
-
davea0511 over 6 yearsThis was the only thing that worked for me, and I tried all 10 different solutions posted to this question so far.
-
Robert about 5 yearsExact this worked like a charm. I have a textarea where to split text with new lines and this is the solution
-
krave almost 5 yearsHow can I display additional spaces based on textContent? does not work here.
-
Aqo almost 5 years@krave to support more whitespace characters you'll have to extend the function to be familiar with them
-
GTS Joe about 4 yearsBest answer in my use-case.
-
cdauth almost 2 yearsWindows line breaks are
\r\n
, not\n\r
. -
cdauth almost 2 yearsDoes not make any sense. This will simply put the text
some \\n some
into the element. Also, the question was abouttextContent
, notinnerHTML
.