正在转换<br>标记到<Div>或者<P>标签

Converting <br> Tags to <Div> or <P> Tags

本文关键字：lt gt Div 或者 标签 br 转换      更新时间：2023-09-26

我收到了各种格式的HTML，我正在尝试使用jQuery标准化代码。在某些情况下，我使用换行符<br>来分隔行。我需要这些是<div>（或<p>）标签。例如以下代码：

a<br>b<br>c

需要转换为

<div>a</div><div>b</div><div>c</div>

这是一个简单的情况，因为a中的内容可能被各种<font>、<span>和其他格式选项包围，所有这些都需要保留。

这是我的第一次尝试。它在整个文档中找到所有的<br>标记，然后访问父级的内容以获得<br>周围的所有HTML。如果内容长度为1，那么<br>是其中唯一的元素（意思是空行），所以跳到下一个。否则，查看每个元素，用<div>（或<p>）包围它，并删除<br>，因为不再需要它了。变量wrapper为"<div />"或"<p />"，具体取决于浏览器。

$("br").each(function() {
  // Find all the br tags' parent nodes
  var elements = $(this).parent().contents();
  if (elements.length > 1) {
    // If there is one element than it is br so skip on.
    elements.each(function() {
      // Loop through each child element of the parent 
      var nodeName = this.nodeName.toLowerCase();
      if (nodeName !== 'div' && nodeName !== 'p') {
      // Make sure each child that is not <br> is wrapped. Remove <br> tags.
        if (nodeName == 'br') {
          $(this).remove();
        } else {
          $(this).wrap(wrapper);
        }
      }
    });
  }
});

不过，这不起作用，因为它在每个子元素周围添加了<div>（或<p>）标签，所以像<font>a</font>bc<br>de<b>f</b>这样的东西最终会像一样

<div><font>a</font></div>
<div>bc</div>
<div>de</div>
<div><b>f</b></div>

当它真的需要时

<div><font>a</font>bc</div>
<div>de<b>f</b></div>

（为了更容易阅读，我把它拆开了。）

如果我在文本解析器中这样做，我会像上面对变量elements所做的那样找到内容，在开头添加<div>，在结尾添加</div>，然后用</div><div>替换每个<br>（除非它已经是<div><br></div>，此时我会跳过它）。我不知道如何在jQuery/Javascript中做到这一点。尤其是关于用</div><div>替换<br>部分。（第一部分为elements.wrap(wrapper)。）

如有任何关于这一方法或其他方法的帮助，我们将不胜感激。

---更新---

@Ian提供的代码必须有效。我只是稍微扩展了一下，想把它包括在这里。我已经在FF、Safari、Chrome和IE 9+中测试过了。

$("br").each(function(idx, el) {
    var $el = $(el),
        $parent = $el.parent(),
        $contents = $parent.contents(),
        $cur, $set, i;
    $set = $();
        if ($contents.length > 1) {
        for (i = 0; i < $contents.length; i++) {
            $cur = $contents.eq(i);
            if ($cur.is("br")) {
                $set.wrapAll(wrapper);
                $cur.remove();
                $set = $();
            } else {
                $set = $set.add($cur);
            }
        }
        $set.wrapAll(wrapper);
    }
});

我的建议是按<br>:分割文本

var lines = content.split("<br>");

现在，您可以将每一行封装在<div>:中

var newContent = "";
for(var i=0,l=lines.length;i<l;i++){
     newContent += "<div>"+lines[i]+"</div>";
}

您可以执行所描述的完全文本替换方法。

function changeBrToDiv(node) {
  var html = $(node).html();
  html = "<div>" + html.split("<br>").join("</div><div>") + "</div>";
  node.html(html);
}

您可以在jsFiddle上看到这一点。

在我看来，您可能希望将br标记保留在DOM中，直到您完成对它的遍历。在第二个示例中，除非您将br标记保留为参考点，否则您将不知道打开的div标记的高度。我会获取父元素，查找DOM，直到找到打开的<body>或<br>，然后在那里添加打开标记。冲洗并重复

<br>标记不包含文本，并且对于多个<br>，父标记可能完全相同，如这里所示：

<div id="theOne">text<br>more text<br>even more text</div>

做$('br').each()和$(this).parent()会给你两次<div id="theOne">。

如果你可以将html作为文本处理，你可以这样做（类似于Ibu，但更简单）：

var newContent = '<div>'+content.split('<br>').join('</div><div>')+'</div>';

如果你想使用节点操作（你否决了类似的答案），那么你必须使用本机Javascript .childNodes来访问文本节点，据我所知，jQuery不允许你这样做。

我认为这可能是您的问题：

var elements = $(this).parent().contents();

应该是

var elements = $(this).parent().children();

由于contents也将文本元素作为节点返回，而children将只返回实际的dom元素

您可以在POJS中尝试类似的操作；操作DOM，而不是将标记视为文本。您可能需要稍微修改一下，以满足您的确切要求。

HTML

<div>one
    <br>two</div>
<br>
<div>
    <br>
</div>
<div>
    <div>three
        <br><font>a</font>bc
        <br>de<b>f</b>
    </div>
</div>
<span>a</span>
<br>b<span>c</span>d
<br>e<span>f</span>g

Javascript

function prepend(referenceNode, newNode) {
    if (referenceNode.firstChild) {
        referenceNode.insertBefore(newNode, referenceNode.firstChild);
    } else {
        referenceNode.appendChild(newNode);
    }
}
var brs = document.getElementsByTagName("br"),
    docFragment = document.createDocumentFragment(),
    index1,
    index2,
    parent,
    siblings,
    sibling,
    br;
for (index1 = brs.length - 1; index1 >= 0; index1 -= 1) {
    div = document.createElement("div");
    br = brs[index1];
    parent = br.parentNode;
    siblings = parent.childNodes;
    for (index2 = siblings.length - 1; index2 >= 0; index2 -= 1) {
        sibling = siblings[index2];
        if (sibling === br) {
            break;
        }
        prepend(div, sibling);
    }
    prepend(docFragment, div);
    br.parentNode.removeChild(br);
    if (!brs.length && siblings.length) {
        div = document.createElement("div");
        for (index2 = siblings.length - 1; index2 >= 0; index2 -= 1) {
            prepend(div, siblings[index2]);
        }
        prepend(docFragment, div);
    }
    if (docFragment.childNodes.length && !siblings.length) {
        parent.appendChild(docFragment);
    }
}

在jsfidd

上
相关文章：