将换行符转换为 在标签中

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

你不能简单地在\n中替换<label>，因为它会将<br>s添加到其他元素，例如你的例子中的<div>中的<label>。

你将不得不迭代text nodes并在他们的位置创建/插入<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) { // i.e. 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>