jQuery javascript regex Replace with \n

Question

How do i write a regex to replace   or   with \n. I'm trying to move text from div to textarea, but don't want  's to show in the textarea, so i want to replace then with \n.

which server side language u r using?? if php then nl2br() is the function u need — xkeshav
– xkeshav, Commented May 11, 2011 at 4:54

Lee Taylor · Accepted Answer · 2015-12-30 05:01:34Z

203

var str = document.getElementById('mydiv').innerHTML;
document.getElementById('mytextarea').innerHTML = str.replace(/<br\s*[\/]?>/gi, "\n");

or using jQuery:

var str = $("#mydiv").html();
var regex = /<br\s*[\/]?>/gi;
$("#mydiv").html(str.replace(regex, "\n"));

example

edit: added i flag

edit2: you can use /<br[^>]*>/gi which will match anything between the br and slash if you have for example  

edited Dec 30, 2015 at 5:01

Lee Taylor

7,99416 gold badges38 silver badges53 bronze badges

answered May 11, 2011 at 4:56

Teneff

32.3k13 gold badges76 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pinkie Over a year ago

This works but i just noticed IE6,7,8 displays capital   How can we do it so it works with both lower and upper case letters.

James Khoury Over a year ago

I think supposed to be put inside a textarea.

Teneff Over a year ago

@Pinkie you can add i flag for case insensitive

James Khoury Over a year ago

@pinkie replace the br in the regex with [bB][rR] or add an i after the g

Adam Bergmark · Accepted Answer · 2011-05-11 04:55:21Z

15

myString.replace(/ /g, "\n")

answered May 11, 2011 at 4:55

Adam Bergmark

7,6363 gold badges23 silver badges23 bronze badges

2 Comments

Teneff Over a year ago

it will not work if there are more than one space between the br and the slash

James Khoury Over a year ago

@teneff There isn't normally more than one space but that can be easily solved with a *

Radek Pech · Accepted Answer · 2015-02-05 08:24:35Z

8

True jQuery way if you want to change directly the DOM without messing with inner HTML:

~~$('#text').find('br').prepend(document.createTextNode('\n')).remove();~~

Prepend inserts inside the element, before() is the method we need here:

$('#text').find('br').before(document.createTextNode('\n')).remove();

Code will find any elements, insert raw text with new line character and then remove the elements.

This should be faster if you work with long texts since there are no string operations here.

To display the new lines:

$('#text').css('white-space', 'pre-line');

edited Feb 5, 2015 at 8:24

answered Jan 14, 2015 at 14:37

Radek Pech

3,1081 gold badge27 silver badges31 bronze badges

2 Comments

Clox Over a year ago

That call to remove() removes the newly created textNode. next() would have to be called priorly since prepend() returns the prepended element. So it would have to be: >>>>$('#text').find('br').prepend(document.createTextNode('\n')).next().remove();<<<< Still +1 though. =)

Radek Pech Over a year ago

@Clox: prepend returns the original selector, see jsfiddle.net/nothrem/ygjb5z0h . But what may be the problem is that prepend() inserts the new element inside the old one so when you remove the old one after, it removes the new one as well. Correct method to use is before().

James Khoury · Accepted Answer · 2011-05-11 04:58:34Z

5

a cheap and nasty would be:

~~jQuery("#myDiv").html().replace(" ", "\n").replace(" ", "\n")~~

EDIT

jQuery("#myTextArea").val(
    jQuery("#myDiv").html()
        .replace(/\<br\>/g, "\n")
        .replace(/\<br \/\>/g, "\n")
);

Also created a jsfiddle if needed: http://jsfiddle.net/2D3xx/

edited May 11, 2011 at 4:58

answered May 11, 2011 at 4:51

James Khoury

22.6k4 gold badges36 silver badges66 bronze badges

4 Comments

Adam Bergmark Over a year ago

needs to pass "g" as third arg to replace

James Khoury Over a year ago

@adam Opps! missed that. Thanks adam. Also the regex in your answer is more robust.

eegloo Over a year ago

Sometimes simple mistake happens like : Some one can use "" , in this case use replace(/<\s*\/?br>/ig, "\r\n")

SNS - Web et Informatique Over a year ago

Hi, if like me you inherit a text in html with the line feeds returned formatted by the nl2br () function of PHP you get line feeds like this: . For me, part of this solution worked: (in javascript, on an object $ .text_item) $ .text_item.replace (/ \ / g, "\ n"); , it allowed me to display this text dynamically with Mustache for a template. Line breaks are well rendered in the <textarea>, I voted for!

RobG · Accepted Answer · 2011-05-11 05:16:46Z

2

Not really anything to do with jQuery, but if you want to trim a pattern from a string, then use a regular expression:

<textarea id="ta0"></textarea>
<button onclick="
  var ta = document.getElementById('ta0');
  var text = 'some<br>text<br />to<br/>replace';
  var re = /<br *\/?>/gi;
  ta.value = text.replace(re, '\n');
">Add stuff to text area</button>

edited May 11, 2011 at 5:16

answered May 11, 2011 at 4:54

RobG

148k32 gold badges180 silver badges216 bronze badges

2 Comments

eegloo Over a year ago

Sometimes simple mistake happens like : Some one can use "" , in this case use replace(/<\s*\/?br>/ig, "\r\n")

RobG Over a year ago

@eegloo— is a straightforward error. Strictly, it will close any preceding opening tag however browsers seem to be stupidly tolerant and convert it to  . Also, the OP hasn't asked for that.

Collectives™ on Stack Overflow

jQuery javascript regex Replace <br> with \n

5 Answers 5

4 Comments

2 Comments

2 Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

2 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related