在标签

Question

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

E.g。标签

<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>添加到其他元素，例如<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()函数添加到字符串中以解决此问题

希望这就是你要找的东西。如果需要，很乐意解释或帮助提供更好的解决方案。

＆＃13;

＆＃13;

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;
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;