如何使用jQuery将同时存在的HTML pre标签合并为一个pre标签？

Question

我有一个关于<pre>标签的问题。我的HTML编辑器会将每一行代码都包含在不同的<pre>标签内。例如：

<pre>
    var abc = "apple";
</pre>

<pre>
    var def = "ball";
</pre>

我想要做的是将这两个pre标签合并成一个：

<pre>
    var abc = "apple";
    var def = "ball";
</pre>

包裹必须是连续的<pre>标签，因为在这些<pre>标签块之间有其他文本。

- Anudwigna

---

需要更多信息，了解页面上pre标签之间可能存在的关系。它们是否嵌套在某个公共元素中？它们是否可以随意存在于页面的任何位置？它们之间可以有多大的间距？ - mvrak

pre标签可以随机存在，但它们有一个共同的类。就像写几个代码块，它们之间有解释一样。 - Anudwigna

Answer 1

$(function () {
    var removed = []
    $("pre").each(function () {
        if (removed.indexOf(this) != -1) {
            return;
        }
        var contents = $(this).html();
        var $nextpre;
        while (($nextpre = $(this).next("pre")) && $nextpre.length > 0) {
            contents += $nextpre.html();
            removed.push($nextpre[0]);
            $nextpre.remove();
        }
        $(this).html(contents);
    });
});

FIDDLE

这很接近了。问题在于.next()跳过文本节点，因此它会合并仅由文本分隔而不是其他HTML元素分隔的<pre>块。

- Barmar

---

使用您的脚本，http://jsfiddle.net/NzuCz/ 的输出与合并前后完全相同。 - Danubian Sailor

我已经接近成功了，但现在它会删除合并的<pre>标签，因为下一次迭代仍然会操作该节点，因为它是原始集合的一部分。需要想办法跳过我已经遍历过的节点。 - Barmar

Answer 2

这种方法怎么样：获取相邻的pre对，进行迭代，获取前一个和自身的内容，将它们解除包装以去除pre包装（对），然后用全新的pre标签重新包装它们（对）。

$('pre').next('pre').each(function () {
   $(this)
          .prev('pre')
          .andSelf()
          .contents()
          .unwrap()
          .wrapAll('<pre/>');
});

演示

- PSL

---

pre标签内文本之间的换行符未被包含在内...合并完美。 - Anudwigna

@Anudwigna 它会处理的。你能给我展示一个样例吗？ - PSL

实际上，我正在尝试将一个C程序发布到我的网站上。 C程序的每一行代码都被pre标签包裹。我正在尝试将程序包装成一个pre标签。我认为问题出在我的编辑器上。它是TinyMCE。它会将代码的每一行都包装在pre标签中。JSfiddle不允许在pre标签中编写C代码。出现了一些错误。 - Anudwigna

Answer 3

工作中的jsFiddle演示

$(function () {
    var $pre = $('pre + pre');
    $pre.each(function () {
        var $elem = $(this);
        var $before = $elem.prev('pre');

        $elem.contents().unwrap().appendTo($before);
    });
});

- user1823761

---

这个程序无法捕捉文本节点。它会将它们放在错误的位置。 - AndrewK

以上的代码对我有效，但它没有将 pre 标签内包含的文本之间的换行符纳入考虑。 - Anudwigna

@Anudwigna 请查看此jsFiddle。第一个和第二个pre元素内部有换行符。对我来说它是有效的。 - user1823761

实际上，我正在尝试将一个C程序发布到我的网站上。 C程序的每一行代码都被pre标签包裹。我正在尝试将程序包装成一个pre标签。我认为问题出在我的编辑器上。它是TinyMCE。它会将代码的每一行都包装在pre标签中。JSfiddle不允许在pre标签中编写C代码。出现了一些错误。 - Anudwigna