jQuery JavaScript正则表达式替换 <br> 为 \n

Question

我该如何编写正则表达式以替换<br />或<br>为\n。 我想从

移动文本到，但不想在<textarea>中显示<code><br></code>，因此我想将它们替换为<code>\n</code>。</p>

- Pinkie

---

你在使用哪种服务器端语言？如果是 PHP，那么 nl2br() 就是你需要的函数。 - xkeshav

Answer 1

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

或者使用jQuery：

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

示例

编辑：添加了i标志

编辑2：如果您有例如<br class="clear" />的内容，您可以使用/<br[^>]*>/gi匹配br和slash之间的任何内容

- Teneff

---

这个代码可行，但我注意到IE6、7、8会将大写<BR>显示出来。我们该怎么做才能使其支持大小写字母呢？ - Pinkie

我认为应该放在文本区域内。 - James Khoury

@Pinkie，你可以添加i标志来实现不区分大小写。 - Teneff

@pinkie 将正则表达式中的 br 替换为 [bB][rR] 或在 g 后面添加 i。 - James Khoury

Answer 2

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

- Adam Bergmark

---

如果在“br”和斜杠之间有多个空格，则无法正常工作。 - Teneff

@teneff 通常不会有超过一个空格，但这可以很容易地通过使用 * 解决。 - James Khoury

Answer 3

如果您想直接更改DOM而不涉及内部HTML，则可以使用真正的jQuery方法：

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

在元素内插入内容，我们需要使用before()方法：

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

代码将查找任何<br>元素，插入带有换行符的原始文本，然后删除<br>元素。

如果您处理长文本，则应该更快，因为这里没有字符串操作。

要显示新行：

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

- Radek Pech

---

那个remove()调用会移除新创建的textNode。由于prepend()返回被预置的元素，因此必须先调用next()。所以它应该是：>>>>$('#text').find('br').prepend(document.createTextNode('\n')).next().remove();<<<< 不过还是+1。=) - Clox

@Clox: prepend返回原选择器，详见http://jsfiddle.net/nothrem/ygjb5z0h/。但问题可能在于prepend()将新元素插入旧元素内部，所以当你在之后删除旧元素时，也会一同删除新元素。正确的方法是使用before()。 - Radek Pech

Answer 4

一种便宜而粗劣的选择可能是：

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

编辑

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

如果需要的话，还创建了一个 jsfiddle: http://jsfiddle.net/2D3xx/

- James Khoury

---

需要将“g”作为第三个参数传递给replace函数。 - Adam Bergmark

@adam 哎呀！我错过了。谢谢你，adam。另外，你回答中的正则表达式更加健壮。 - James Khoury

有时候会发生一些简单的错误，比如：有人使用 "</br>"，在这种情况下，请使用 replace(/<\s*/?br>/ig, "\r\n")。 - eegloo

嗨， 如果像我一样，您继承了一个由PHP的nl2br()函数格式化返回的HTML文本，则会得到像这样的换行符：<br />。对我来说，这个解决方案的一部分起作用了：（在javascript中，在一个对象$ .text_item上）$ .text_item.replace(/<br/>/g, "\n");， 它允许我使用Mustache模板动态显示此文本。换行符在<textarea>中呈现得很好，我投赞成票！ - SNS - Web et Informatique

Answer 5

这与jQuery没有什么关系，但是如果您想从字符串中裁剪模式（pattern），那么可以使用正则表达式：

<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

---

有时候会发生一些简单的错误，比如：有人使用 "</br>"，在这种情况下，请使用 replace(/<\s*/?br>/ig, "\r\n")。 - eegloo

@eegloo——</br>是一个简单的错误。严格来说，它将关闭任何先前打开的标签，但浏览器似乎非常宽容并将其转换为<br>。此外，该提问者并没有要求这样做。 - RobG