javascript - 将 标签转换为 或 标签

Question

我正在接收各种格式的 HTML，我正在尝试使用 jQuery 来标准化代码。在某些情况下，我会使用 break <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>最后，然后替换每个 <br>与 </div><div> (除非它已经是 <div><br></div> ，此时我会跳过它)。我不知道如何在 jQuery/Javascript 中执行此操作。不过，尤其是关于替换 <br>与 </div><div>部分。 (第一部分是 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);
    }
});

Answer 1

我的建议是将文本拆分为 <br> :

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

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

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

}