将换行符转换为 <br> 在标签中

Question

我需要将标签中的顶级换行符转换为<br>以便它们实际上看起来像换行符。

例如标签

<label>Hello
there<div>who
knows</div>what's going on</label>

应该成为

<label>Hello<br>there<div>who
knows</div>what's going on</label>

我已经尝试使用.childNodes扫描顶级文本节点并替换文本，但是在文本输出中留下了<br> ，因为它没有正确设置格式，而只是输出为用户可以看到的文本。

$("label[for^='answer']").each(function () {
  var thisElement = this;
  Array.prototype.slice.call($(thisElement)[0].childNodes).forEach(function (elem, index) {
    if (typeof elem.nodeValue == 'string') {
      $(thisElement)[0].childNodes[index].nodeValue = $(thisElement)[0].childNodes[index].nodeValue.replace(/\r\n/g, '<br>').replace(/\n/g, '<br>');
    };
  });
});

如何用正确的HTML替换所有顶级换行符，使它们在输出中看起来像换行符？

Answer 1

您不能简单地在<label>内替换\\n因为它将在其他元素上添加<br> ，例如示例中<label>内的<label> <div> 。

您将不得不遍历文本节点并在其位置创建/插入<br>元素。

另外，要识别文本节点 ，请不要使用

if (typeof elem.nodeValue == 'string') {

采用：

if (elem.nodeType === Node.TEXT_NODE) {

此外，请参见下面的演示。

 //$("label[for^='answer']").each(function () { $("label.change-me").each(function () { var thisElement = this; Array.prototype.slice.call(thisElement.childNodes).forEach(function (elem, index) { if (elem.nodeType === Node.TEXT_NODE) { var lines = elem.nodeValue.split('\\n'); if (lines.length > 1) { // ie there are line breaks elem.nodeValue = lines[0]; var nextElement = elem.nextSibling; for (var i = 1; i < lines.length; i++) { elem.parentNode.insertBefore(document.createElement('br'), nextElement); elem.parentNode.insertBefore(document.createTextNode(lines[i]), nextElement); } } }; }); }); 

 label { color: red } div { color: blue } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="change-me">Hello there<div>who knows</div>what's going on</label> <hr> <label>Hello<br>there<div>who knows</div>what's going on</label> <hr> <label class="change-me">Line-breaks inside labels break<div>I'm inside div so don't break me</div>div is over so break me because we are back to the label</label> 

Answer 2

我对您提出的问题的理解是，您想用<br>标记替换第一个空格。

所以我在字符串中添加了splice()函数来解决这个问题

希望这就是您想要的。 如果需要，很高兴为您解释或提供更好的解决方案。

 String.prototype.splice = function(idx, rem, str) { return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem)); }; $("label").each(function() { var thisText = this.innerHTML; var result = thisText.splice(thisText.indexOf(" "), 0, "<br>"); this.innerHTML = result; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label> Hello there <div>who knows</div> what's going on </label>