A "str" variable in JavaScript return by a backend contains a string with a few paragraphs separated by line breakers.. When I do this:

console.log(str);

the Firefox console displays:

"This is paragraph 1.

This is paragraph2.

This is paragraph3"

The problem is, this str is NOT separated by a "\n" character. It's just separated by invisible linebreaks, as you can see in the console output. Is there any way to detect this line break? What I'm eventually trying to do is replace these invisible line breaks with a "br" tag so that I can append it inside the html document..

Is there a way to do this?

Thanks

(Unfortunately, there is no way to change the backend..)

A "str" variable in JavaScript return by a backend contains a string with a few paragraphs separated by line breakers.. When I do this:

console.log(str);

the Firefox console displays:

"This is paragraph 1.

This is paragraph2.

This is paragraph3"

The problem is, this str is NOT separated by a "\n" character. It's just separated by invisible linebreaks, as you can see in the console output. Is there any way to detect this line break? What I'm eventually trying to do is replace these invisible line breaks with a "br" tag so that I can append it inside the html document..

Is there a way to do this?

Thanks

(Unfortunately, there is no way to change the backend..)

• javascript
• jquery

Share Follow asked Feb 23, 2015 at 6:49 user2436815user2436815 3,93566 gold badges2929 silver badges4040 bronze badges 1

• Do you really need to convert the line breaks? You could use css to display the line breaks ( style="white-space: pre;" ) – fuchs777 Commented Feb 23, 2015 at 7:56

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Take a look at nl2br on php.js which seems exactly what you're looking for. Basically, it's:

function nl2br (str, is_xhtml) {
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}

Demo : http://devilmaycode.altervista/jquery-convert-line-breaks-to-br-nl2br-equivalent/

var text = "This is paragraph 1.

            This is paragraph2.

            This is paragraph3";


var matches = text.match(/\n/g);
var new_lines = matches ? matches.length : 0;  //Get no. of new line here

Demo

As an alternative thought (and if possible in your situation), because you essentially want to render the text in HTML with the line-breaks preserved, you can make use of CSS to do this for you. Take a look at the the white-space property with a value of pre-line or pre-wrap:

Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks - W3Schools

So, if you append the string to the DOM as a paragraph like:

    <p class="preserveLineBreaks">This is paragraph 1.

This is paragraph2.

This is paragraph3<p>

Then with a simple CSS selector as follows, you'll get the expected result:

.preserveLineBreaks {
    white-space: pre-line; //or pre-wrap
}

Actually, the "invisible line breaks" in the Firefox console are the \n characters. I've included a line to confirm this in the code below. In addition, browsers will generally ignore the \n character in favor of the <br/> and so the str variable that you have should display nicely as one line. To however identify the "\n" chars and replace them with <br />, try this

<span id="someText">This is 
some text 
that I need 
to modify
</span>

<script>
	var text = document.getElementById("someText") ; 
	alert(text.innerHTML.match(/\n/g).length) ; // confirm \n are in var
	alert (text.innerHTML) ; 
	var withBRs = text.innerHTML.replace(/\n/g, "<br />") ; 
	text.innerHTML = withBRs ; 
</script>