79

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

Pinkie
  • 10,126
  • 22
  • 78
  • 124

5 Answers5

201
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 <br class="clear" />

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
Teneff
  • 30,564
  • 13
  • 72
  • 103
13

myString.replace(/<br ?\/?>/g, "\n")

Adam Bergmark
  • 7,316
  • 3
  • 20
  • 23
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 <br> elements, insert raw text with new line character and then remove the <br> 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');
Radek Pech
  • 3,032
  • 1
  • 24
  • 29
  • 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. =) – Clox Feb 04 '15 at 20:18
  • 1
    @Clox: prepend returns the original selector, see http://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(). – Radek Pech Feb 05 '15 at 08:27
5

a cheap and nasty would be: 

jQuery("#myDiv").html().replace("<br>", "\n").replace("<br />", "\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/

James Khoury
  • 21,330
  • 4
  • 34
  • 65
  • 1
    needs to pass "g" as third arg to replace – Adam Bergmark May 11 '11 at 04:56
  • @adam Opps! missed that. Thanks adam. Also the regex in your answer is more robust. – James Khoury May 11 '11 at 05:00
  • Sometimes simple mistake happens like : Some one can use "" , in this case use replace(/<\s*\/?br>/ig, "\r\n") – eegloo Nov 11 '13 at 10:25
  • 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     – SNS - Web et Informatique Feb 01 '20 at 05:43
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>
RobG
  • 142,382
  • 31
  • 172
  • 209
  • Sometimes simple mistake happens like : Some one can use "" , in this case use replace(/<\s*\/?br>/ig, "\r\n") – eegloo Nov 11 '13 at 10:24
  • @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.     – RobG Nov 11 '13 at 22:57