javascript - 我如何通过 JavaScript "merge"两个 HTML 标签

Question

这是我的 HTML“沙箱”:

<p>1 2 3</p>
<span id="myid">
<span id="mytext">
<p>4 5 6</p>
<p>7 8 9</p>
<p>10 11 12</p>
</span>
</span>
<p>13 14 15</p>

我想相应地“合并”p 标签:
(为了更容易看到，我在进行更改的位置添加了一个减号:)

<p>1 2 3 -
<span id="myid">
<span id="mytext">
- 4 5 6</p>
<p>7 8 9</p>
<p>10 11 12 -
</span>
</span>
- 13 14 15</p>

在我添加减号的每个地方，我实际上都删除了 <p> 或 </p> 标签，在两个段落元素之间进行合并(1 2 3 和 4 5 6 之间以及 10 11 12 和 13 14 15 之间)- (此合并仅是为了实现 123-456 和 101112-131415 的内联显示)。

如何使用“原始”JavaScript(请不要使用库)实现此结果。

注意:我尝试创建一些东西，但它花了我 80 行代码 - 我确信有更好的方法来做到这一点。

编辑:Jon Hanna 在他的评论中提到我可以像这样使用正确的 HTML(作为 JavaScript 的结果):

    <p>1 2 3 <span class="myclass mytext">4 5 6</span></p>
<p class="myclass mytext">7 8 9</p>
<p><span class="myclass mytext"10 11 12</span> 13 14 15</p>

Answer 1

(请耐心等待，我在您最新编辑之前就开始写这篇文章了。不过，我认为它仍然有用。)

我不确定您想要实现什么，但我可以告诉您，使用 JavaScript 很难完全实现您所要求的目标。这主要是因为 HTML 无效。

让我们首先了解为什么 HTML 无效。当浏览器解析 HTML 时，它会构建一个嵌套的 DOM 节点树。您的第一个示例可以表示如下:

• <p>
  • 1 2 3
• <span id="myid">
  • <span id="mytext">
    • <p>
      • 4 5 6
    • <p>
      • 7 8 9
    • <p>
      • 10 11 12
• <p>
  • 13 14 15

使用 JavaScript 和 DOM，您可以遍历这棵树并对其进行操作。您可以组合来自各种 <p> 的文本节点标签并将它们放在一个 <p> 中标签没有问题。但是您将无法创建第二个示例的结构。它的形状根本不像 DOM 树，因此您无法使用 DOM 来创建该 HTML。

将 HTML 操作为第二个示例的形状的唯一方法是通过 innerHTML ，例如 Jon Hanna explains 。好消息是浏览器总是会将无效的 HTML 纠正为有效的 DOM 结构。坏消息是每个浏览器的处理方式都不同，所以你永远不知道最终会得到什么。

唯一真正的解决方案是重新考虑您的 HTML 结构，就像您在最新编辑中所做的那样。

解决原始问题的方法取决于原始 HTML 的静态程度。我将给出一个粗略的例子，为此我假设:

• 总有5 <p>的
• <p> 的第二个到第四个总是在 <span> 内's，并且第一个和第五个总是在它们之外

如果满足这两个条件，您可以使用如下内容:

var paragraphs = document.getElementsByTagName('p');
var newParagraphs = [];

function createElementWithText(tagname, text, classname) {
    var classname = classname || '';
    var element = document.createElement(tagname);
    element.className = classname;
    element.appendChild(document.createTextNode(text));
    return element;
}

newParagraphs[0] = createElementWithText('p', paragraphs[0].textContent);
newParagraphs[0].appendChild(createElementWithText('span', paragraphs[1].textContent, 'myclass mytext'));

newParagraphs[1] = createElementWithText('p', paragraphs[2].textContent, 'myclass mytext');

newParagraphs[2] = document.createElement('p');
newParagraphs[2].appendChild(createElementWithText('span', paragraphs[3].textContent, 'myclass mytext'));
newParagraphs[2].appendChild(document.createTextNode(paragraphs[4].textContent));

我在 JSFiddle 上发布了一个工作示例:jsfiddle.net/vSrLJ/