将 DOM 元素替换为仅开始标记(或结束标记）

Replace DOM Element with Opening Tag Only (or Closing Tag)

本文关键字：结束 开始 元素 DOM 替换      更新时间：2023-09-26

我使用Blogger作为我的博客平台。令人讨厌的是，在富文本编辑器中按回车键会创建
（换行符）标签，而不是

（段落标签）。不幸的是，我没有发现在Blogger平台中切换它的方法。 所以我的解决方案是使用 jQuery 将每个偶数
标签替换为一个开始的

标签，

将每个奇数
替换为一个结束的

标签，如下所示。 
<br /> (replace with <p>)
Some initial paragraph
<br /> (replace with </p>)
<br /> (replace with <p>)
Some second paragraph
<br /> (replace with </p>)
<br /> (replace with <p>)
Some third paragraph
<br /> (replace with </p>)

为此，我编写了下面的jQuery。

$("br").each(function(i){
    if (i % 2 === 0){
        $(this).replaceWith("<p>");
    } else {
        console.log("odd break");
        $(this).replaceWith("</p>");
    }
})

但是，我没有得到上面的结果，而是发现每个
标签都被替换为开始和结束标签

关于我如何做到这一点的任何建议？

谢谢！

（请不要建议我切换到另一个真正做我想要的博客平台。我不想这样做，它实际上也没有回答我的问题。

您只能将完整节点附加到 dom。一种解决方案是将文本节点包装在<p>元素中并删除<br>：

http://jsfiddle.net/MYFQV/

$('#content').contents().filter(function() {
   return this.nodeType == 3 && $.trim($(this).text()).length > 0; 
}).wrap('<p/>');
$('#content br').remove();

var s = $('#content').html();
var i = -1;
s = s.replace(/<br '/>/gi, function() {
    i++;
    return i % 2 == 0 ? '</p>' : '<p>';
}, 'gi');
$('#content').html(s);

这会将 HTML 作为文本读取，使用正则表达式将<br />的每个实例替换为正确的开始或结束标记，然后将 HTML 字符串写回页面。

你在 HTML 标签汤和 DOM 之间混淆了。

当在浏览器中访问页面时，它（浏览器）解析HTML代码（标签）并创建DOM元素。它不会太关心HTML的有效性，例如：

<div id="parent>
  <p>
  One paragraph
  <div>Split</div>
  Another paragraph
  </p>
</div>

将变成一棵树，有一个父母和三个孩子，就像这样：

#parent 
  p > text(One Paragraph)    
  div > text(Split)
  text(Another paragraph)

相反，您可以做的是提取br标签之间的文本并将其放置在段落中。

相关文章：