Javascript 如何分别检索父元素中子元素前后的HTML？

我们正在编写一个依赖Javascript/jQuery的web应用程序。它包括用户在一大块文本中填写单个单词，有点像疯狂的Libs。我们创建了一种HTML格式，用于编写大块文本，然后在用户填写时使用jQuery对其进行操作

文本块的一部分可能如下所示：

<span class="fillmeout">This is a test of the <span>NOUN</span> Broadcast System.</span>

$(".fillmeout").each(function() {
    var node = this.firstChild, prefix = "", suffix = "", foundSpan = false;
    while (node) {
        if (node.nodeType == 3) {
            // if text node
            if (!foundSpan) {
                prefix += node.nodeValue;
            } else  {
                suffix += node.nodeValue;
            }
        } else if (node.nodeType == 1 && node.tagName == "SPAN") {
            // if element and span tag
            foundSpan = true;
        }
        node = node.nextSibling;
    }
    // here prefix and suffix are the text before and after the first
    // <span> tag in the HTML
    // You can do with them what you want here
});

考虑到这个标记，我需要分别检索和操作内部标记前后的文本；我们称之为前缀和后缀

我知道，但我还是试过了；我试着在和标签上使用split。这似乎很简单。不幸的是，InternetExplorer将所有HTML标记强制转换为大写，因此该技术失败。我可以写一个特例，但这个错误教会了我正确的方法

我知道我可以简单地使用额外的HTML标记来手动表示前缀和后缀，但这看起来既丑陋又多余；我希望我们的标记格式尽可能精简、可读写

我已经浏览了jQuery文档，但找不到一个完全满足我需要的函数。有各种各样的函数可以在元素之前、之后、周围和内部添加内容，但我找不到任何函数来检索已经存在的内容。我可以删除内部元素，但我不知道如何区分删除元素之前和之后的内容

---

有没有正确的方法来完成我想做的事情？

通过简单的字符串操作，您也可以使用正则表达式。 那应该能解决你的问题

var array = $('.fillmeout').html().split(/<\/?span>/i);

---

通过简单的字符串操作，还可以使用正则表达式。 那应该能解决你的问题

var array = $('.fillmeout').html().split(/<\/?span>/i);

使用jQuery API！$”。然后您可以根据需要操作该元素

使用jQuery API！$”。然后您可以根据需要操作该元素

---

我也不确定这是否是“正确”的方法，但您可以用一个元素替换跨度，您可以在该元素上一致地拆分字符串：

jQuery('.fillmeout span').replaceWith('|');

---

我也不确定这是否是“正确”的方法，但您可以用一个元素替换跨度，您可以在该元素上一致地拆分字符串：

jQuery('.fillmeout span').replaceWith('|');

你可以用

$('.fillmeout span').get(0).previousSibling.textContent
$('.fillmeout span').get(0).nextSibling.textContent

这在IE9中有效，但遗憾的是在小于9的IE版本中无效。

您可以使用

$('.fillmeout span').get(0).previousSibling.textContent
$('.fillmeout span').get(0).nextSibling.textContent

---

这在IE9中有效，但遗憾的是在小于9的IE版本中无效。

根据您的示例，您可以使用您的目标作为分隔符来分割句子

var str = $('.fillmeout').html();
str = str.split('<span>NOUN</span>');

---

这将返回一个数组[这是对广播系统的测试。]。下面是一个。

基于您的示例，您可以使用目标作为分隔符来拆分句子

var str = $('.fillmeout').html();
str = str.split('<span>NOUN</span>');

---

这将返回一个数组[这是对广播系统的测试。]。这里有一个。

如果您想使用DOM而不是自己解析HTML，并且无法将所需的文本放入它自己的元素中，那么您需要在DOM中查找文本节点，并在span标记前后找到文本节点

在处理文本节点而不是元素节点时，jQuery没有太多帮助，因此工作主要是在纯javascript中完成的，如下所示：

<span class="fillmeout">This is a test of the <span>NOUN</span> Broadcast System.</span>

$(".fillmeout").each(function() {
    var node = this.firstChild, prefix = "", suffix = "", foundSpan = false;
    while (node) {
        if (node.nodeType == 3) {
            // if text node
            if (!foundSpan) {
                prefix += node.nodeValue;
            } else  {
                suffix += node.nodeValue;
            }
        } else if (node.nodeType == 1 && node.tagName == "SPAN") {
            // if element and span tag
            foundSpan = true;
        }
        node = node.nextSibling;
    }
    // here prefix and suffix are the text before and after the first
    // <span> tag in the HTML
    // You can do with them what you want here
});

注意：此代码不假设跨距之前的所有文本都位于一个文本节点中，并且仅位于一个文本节点中。可能是这样，但也可能不是这样，因此它会将span标记前后的所有文本节点整理在一起。如果只在每一侧引用一个文本节点，代码会更简单，但这不是100%确定的安全假设

此代码还处理在跨度之前或之后没有文本的情况

---

您可以在这里看到它的工作原理：

如果您想使用DOM而不是自己解析HTML，并且无法将所需的文本放入它自己的元素中，那么您需要在DOM中查找文本节点，并找到span标记前后的文本节点

在处理文本节点而不是元素节点时，jQuery没有太多帮助，因此工作主要是在纯javascript中完成的，如下所示：

<span class="fillmeout">This is a test of the <span>NOUN</span> Broadcast System.</span>

$(".fillmeout").each(function() {
    var node = this.firstChild, prefix = "", suffix = "", foundSpan = false;
    while (node) {
        if (node.nodeType == 3) {
            // if text node
            if (!foundSpan) {
                prefix += node.nodeValue;
            } else  {
                suffix += node.nodeValue;
            }
        } else if (node.nodeType == 1 && node.tagName == "SPAN") {
            // if element and span tag
            foundSpan = true;
        }
        node = node.nextSibling;
    }
    // here prefix and suffix are the text before and after the first
    // <span> tag in the HTML
    // You can do with them what you want here
});

注意：此代码不假设跨距之前的所有文本都位于一个文本节点中，并且仅位于一个文本节点中。可能是这样，但也可能不是这样，因此它会将span标记前后的所有文本节点整理在一起。如果只在每一侧引用一个文本节点，代码会更简单，但这不是100%确定的安全假设

此代码还处理在跨度之前或之后没有文本的情况

您可以在这里看到它的工作原理：

您可以使用下一个sibling和上一个sibling本机JavaScript以及jQuery选择器：

$('.fillmeout span').each(
    function(){
        var prefix = this.previousSibling.nodeValue,
            suffix = this.nextSibling.nodeValue;
    });

参考资料：

. . . 您可以只使用nextSibling和previousSibling本机JavaScript以及jQuery选择器：

$('.fillmeout span').each(
    function(){
        var prefix = this.previousSibling.nodeValue,
            suffix = this.nextSibling.nodeValue;
    });

参考资料：

. . .

---

为了完整起见，我想我应该指出，最简洁的答案是把前缀和后缀放在te上 xt，然后您可以使用jQuery选择器和方法直接访问所需的文本：

<span class="fillmeout">
    <span class="prefix">This is a test of the </span>
    <span>NOUN</span>
    <span class="suffix"> Broadcast System.</span>
</span>

仅供参考，我不会像你所说的那样，把这种简单程度称为丑陋和多余。您正在使用HTML标记将文本描绘成要单独访问的单独元素。这很聪明，不是多余的

打个比方，假设你有三种不同颜色的玩具——红色、白色和蓝色，它们最初是按颜色组织的，你知道在将来的某个时候你需要再次按颜色将它们分开。你也有三个盒子来存放它们。您可以现在将它们全部放在一个框中，稍后再手动按颜色对它们进行排序，也可以将已经分离的颜色分别放在各自的框中，这样以后就没有分离工作要做了。哪个更容易？哪个更聪明

---

HTML元素类似于框。它们是文本的容器。如果您希望将来将文本分离出来，您不妨将每段文本放入它自己的命名容器中，以便将来可以轻松访问该段文本。

为了完整性，我想我应该指出，最简洁的答案是将前缀和后缀文本放在自己的文本中，就像这样，然后您可以使用jQuery选择器和方法直接访问所需的文本：

<span class="fillmeout">
    <span class="prefix">This is a test of the </span>
    <span>NOUN</span>
    <span class="suffix"> Broadcast System.</span>
</span>

仅供参考，我不会像你所说的那样，把这种简单程度称为丑陋和多余。您正在使用HTML标记将文本描绘成要单独访问的单独元素。这很聪明，不是多余的

打个比方，假设你有三种不同颜色的玩具——红色、白色和蓝色，它们最初是按颜色组织的，你知道在将来的某个时候你需要再次按颜色将它们分开。你也有三个盒子来存放它们。您可以现在将它们全部放在一个框中，稍后再手动按颜色对它们进行排序，也可以将已经分离的颜色分别放在各自的框中，这样以后就没有分离工作要做了。哪个更容易？哪个更聪明

---

HTML元素类似于框。它们是文本的容器。如果您希望将来将文本分离出来，您不妨将每一段文本放入它自己的命名容器中，这样以后就可以轻松访问该段文本。

其中一些答案几乎满足了我的需要，但最后我发现了一个未在此处提及的函数：。它返回一个包含所有子节点（包括文本节点）的数组，如果需要，我可以递归遍历这些子节点以找到我需要的内容。

其中一些答案几乎满足了我的需要，但最终我找到了一个此处未提及的函数：。它返回一个包含所有子节点（包括文本节点）的数组，如果需要，我可以递归遍历该数组以查找所需内容。

这假设范围之前的所有文本都在一个文本节点中，同样，范围之后的所有文本都在一个文本节点中。在某些情况下可能是一个有效的假设，但不一定能保证。这是真的，是的。但考虑到示例标记，这似乎是一个合理的假设。这假设跨距之前的所有文本都在一个文本节点中，同样，跨距之后的所有文本都在一个文本节点中。在某些情况下可能是一个有效的假设，但不一定能保证。这是真的，是的。但考虑到示例标记，这似乎是一个合理的假设。为什么.contents比其他答案（如我的答案）更有效，也会迭代本机DOM节点，而您甚至都不愿意放弃投票？在迭代.contents时，您需要的检查节点类型和标记名的逻辑几乎与我在回答中包含的逻辑相同。我想我只是觉得我给了您一个经过测试的、可以使用JSFIDLE的答案，其中包含了很多您甚至需要使用.contents的详细信息，而您甚至没有确认它。为什么？相反，你发布你自己的答案，需要的逻辑几乎与已经提供的答案相同。从SO的角度来看，你没有代码的答案对未来读者的帮助也不会比包含工作代码的答案更大。@jfriend00:指出。内容确实帮助了我，因为我不知道这个函数，它确实提供了问题中要求的内容。您的答案虽然有趣，但需要修改HTML代码，这在解析您自己不生成的HTML代码时是不可能的。为什么.contents比其他答案（如我的答案）更好，这些答案也可以遍历本机DOM节点，而您甚至不必为此投赞成票？在迭代.contents时，您需要的检查节点类型和标记名的逻辑几乎与我在回答中包含的逻辑相同。我想我只是觉得我给了您一个经过测试的、可以使用JSFIDLE的答案，其中包含了很多您甚至需要使用.contents的详细信息，而您甚至没有确认它。Wh Y相反，你发布你自己的答案，需要的逻辑几乎与已经提供的答案相同。从SO的角度来看，你没有代码的答案对未来读者的帮助也不会比包含工作代码的答案更大。@jfriend00:指出。内容确实帮助了我，因为我不知道这个函数，它确实提供了问题中要求的内容。您的答案虽然有趣，但需要修改HTML代码，这在解析您自己不生成的HTML代码时是不可能的。