javascript - 查找嵌套 HTML 中文本节点的长度(直到某个点)

Question

使用这样的 HTML:

<div id="container">                                                                                 
  <p>Lorem ipsum lorem ipsum
    <p>This is the second!
      <span data-attribute="my-span">Hello World</span>
    </p>
  </p>
</div> 

我想找到从容器到我的跨度的文本长度。因此，通过计算后代的指数，我得到的正确答案是 42。

但是如果我有这样的 HTML:

  <div id="container">                                                                                 
      <p>Lorem ipsum lorem ipsum
        <p>This is the second!
          <span data-attribute="my-span">Hello World</span>
        </p>
        Some preceding HTML that I dont want!
      </p>
    </div> 

我不希望字符计数继续我的跨度。我只希望字符数达到我的跨度，所以正确的答案仍然是 42。但是通过计算子文本长度，它还会添加前面的文本和跨度的文本(只需减去它就可以很容易地摆脱它)从总数)。

我已经探索过列出 html 和子字符串直到我想要的 span 属性，分离末尾并解析出 html，只留下我想要计算的文本字符。但这似乎过于复杂。

我也在考虑使用类似 wicked good xpath 的东西查找直到我要查找的节点为止的所有节点，然后对文本进行求和。

我还考虑过只列出某个点之前的所有文本节点并对它们求和，但它在我的跨度文本之前列出了子节点的前面文本，因此它的求和顺序不正确。

此外，嵌套可能有 n 层深，因此不要假设只有一层。

关于实现这一目标的最佳方法有什么建议吗？

Answer 1

始终可用的一个选项是手动遍历 DOM 树。 jQuery 并不擅长处理非元素节点(当我们执行 .find('*').contents() 时，似乎所有子节点的后代都列在每个节点的所有子节点之后，并且 contents 是唯一可以看到这些节点的方法)，但我们仍然可以使用原生 API。另请注意，这里处理空白很棘手(我假设您想要折叠空白来模仿渲染器行为)，如下所示:

function countCharsUntil(parent, selector, inclusive){
  var done = false;
  return listChars(parent).replace(/\s+/g," ").trim().length;

  function listChars(elem){
    var cn = elem.childNodes;
    var chars = "";
    if(!inclusive && $(elem).is(selector)){
      done = true;
      return ""
    }
    for(var i=0; i<cn.length && !done; i++){
      var child = cn[i];
      switch(child.nodeType){
        case Node.ELEMENT_NODE:
          chars += listChars(child);
          break;
        case Node.TEXT_NODE:
          chars += child.nodeValue;
          break;
      }
    }
    if(inclusive && $(elem).is(selector)){
      done = true;
      return chars;
    }
    return chars;
  }
}

测试:http://jsfiddle.net/8hxb6/1/

请注意，测试为独占搜索返回 43 个字符。这可能是因为您忽略了 div>p 内的“ipsum”和 div>p>p

内的“This”之间的空格