如何分别检索父元素内子元素之前和之后的H​​TML？

Question

我们正在编写一个依赖Javascript / jQuery的Web应用程序。 它涉及到用户在大量文本中填充单个单词，类似于Mad Libs。 我们创建了一种HTML格式，用于编写较大的文本块，然后在用户填写文本时使用jQuery对其进行处理。

一段文本的一部分可能看起来像这样：

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

有了这个标记，我需要分别检索和处理内部<span>之前和之后的文本； 我们称这些为“前缀”和“后缀”。

我知道 您无法使用简单的字符串操作来解析HTML ，但是无论如何我还是尝试了。 我尝试在<span>和</span>标记上使用split() 。 看起来很简单。 不幸的是，Internet Explorer将所有HTML标记都转换为大写，因此该技术失败。 我可以写一个特例，但是错误告诉我正确的方法。

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

我已经浏览了jQuery文档，但找不到能完全满足我需要的功能。 有各种各样的函数可以在元素前后，元素周围和元素内部添加东西，但是我找不到它们来检索已经存在的东西。 我可以删除内部的<span> ，但是我不知道如何知道删除的元素之前和之后的内容。

是否有“正确”的方式来做我想做的事情？

Answer 1

通过简单的字符串操作，您也可以使用Regex。 那应该解决您的问题。

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

Answer 2

使用您的jQuery API！ $('.fillmeout').children() ，然后您可以根据需要操纵该元素。

http://api.jquery.com/children/

Answer 3

为了完整起见，我想指出最干净的答案是像这样将前缀和后缀文本放入自己的<span> ，然后可以使用jQuery选择器和方法直接访问所需的文本：

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

然后，代码将很简单：

var fillme = $(".fillmeout").eq(0);
var prefix = fillme.find(".prefix").text();
var suffix = fillme.find(".suffix").text();

仅供参考，按照您的理论，我不会将此简单程度称为“丑陋且多余的”。 您正在使用HTML标记将文本划分为要单独访问的单独元素。 那只是聪明，而不是多余。

打个比方，假设您有三种不同颜色（红色，白色和蓝色）的玩具，它们最初是按颜色组织的，并且您知道在将来的某个时候，您将需要再次将它们按颜色分开。 您还可以将它们存储在三个盒子中。您既可以将它们全部放入一个盒子中，以后再按颜色手动对其进行分类，也可以只采用已经分开的颜色并将它们分别放入自己的盒子中，这样就不会分离以后要做的工作。 哪个更容易？ 哪个更聪明？

HTML元素就像盒子一样。 它们是您的文本的容器。 如果希望将来将文本分隔开，最好将每段文本放入其自己的命名容器中，以便将来轻松访问该段文本。

Answer 4

这些答案中的几个几乎可以满足我的需求，但是最后我发现这里没有提到的函数： .contents() 。 它返回一个包括子节点在内的所有子节点的数组，然后我可以遍历（如果需要，可以递归）以查找所需的子节点。

Answer 5

我不确定这是否也是“正确”的方法，但是您可以将SPAN替换为可以一致地在以下位置分割字符串的元素：

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

http://api.jquery.com/replaceWith/

http://jsfiddle.net/mdarnell/P24se/

Answer 6

你可以用

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

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

Answer 7

根据您的示例，您可以将目标用作分隔句的分隔符。

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

这将返回一个数组["This is a test of the ", " Broadcast System."] 。 这是一个jsFiddle示例 。

Answer 8

如果要使用DOM而不是自己解析HTML，并且不能将所需的文本放入其自己的元素中，则需要遍历DOM中的文本节点，并在span标记前后查找文本节点。 。

当处理文本节点而不是元素节点时，jQuery并不是很大的帮助，因此工作大部分是用普通的javascript完成的，如下所示：

$(".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％地确定这是一个安全的假设。

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

您可以在这里看到它的工作： http : //jsfiddle.net/jfriend00/P9YQ6/

Answer 9

您可以只使用nextSibling和previousSibling本机JavaScript（结合jQuery选择器）：

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

JS Fiddle概念证明 。

参考文献：

• each() 。
• node.nextSibling 。
• node.previousSibling 。