问在标签中将换行符转换为 
EN

Stack Overflow用户

提问于 2018-03-03 19:20:05

回答 2查看 86关注 0票数 1

我需要将标签中的顶级换行符转换为 ，这样它们看起来就像换行符。

例如标签

<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扫描顶级文本节点并替换文本，但这使得文本输出中保留了一个 ，因为它没有被正确格式化，只是输出到用户可以看到的文本中。

$("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替换所有顶层换行符，使它们在输出中看起来像换行符？

jquery

html

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-03-03 19:45:21

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

您必须遍历text nodes并在它们的位置创建/插入 元素。

此外，要标识文本节点，请不要使用

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>

票数 1

Stack Overflow用户

发布于 2018-03-03 19:42:01

我所理解的问题是，您想用 标记替换第一个空格。

所以我将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>