javascript - 如何使用 Javascript 仅在 HTML 字符串的文本部分中查找子字符串？

Question

更新:我不再特别需要这个问题的答案 - 我能够以完全不同的方式解决我遇到的(更大的)问题(请参阅我的评论)。不过，我会偶尔查看，如果有可行的答案，我会接受。 (不过，这可能需要一到三周的时间，因为我只是偶尔来这里。)

我有一根绳子。它可能有也可能没有 HTML 标签。所以，它可能是:

'This is my unspanned string'

或者可能是:

'<span class="someclass">This is my spanned string</span>'

或者:

'<span class="no-text"></span><span class="some-class"><span class="other-class">This is my spanned string</span></span>'

或者:

'<span class="no-text"><span class="silly-example"></span></span><span class="some-class">This is my spanned string</span>'

我想找到子字符串的索引，但仅限于字符串的部分，如果字符串被转换为 DOM 元素，则该部分将是 TEXT 节点。在示例中，仅出现在字符串中包含纯文本 This is my string 的部分。

但是，我需要子字符串在整个字符串中的位置，而不仅仅是在纯文本部分中。

所以，如果我在上面的每个字符串中搜索“span”:

• 搜索第一个将返回 13(从 0 开始)，
• 搜索第二个将跳过字符串中的开始 span 标记，并为单词 spanned 中的字符串 span 返回 35
>
• 搜索第三个将跳过空的 span 标签和两个嵌套 span 标签的开头，并返回 91
• 搜索第四个将跳过嵌套的 span 标签和第二个 span 标签的开头，并返回 100

我不想删除任何 HTML 标记，我只是不希望它们包含在搜索中。

我知道尝试使用正则表达式几乎肯定是 a bad idea ，甚至可能对于我的代码会遇到的简单字符串，所以请不要建议它。

我猜我需要使用 HTML 解析器(这是我以前从未做过的事情)。是否有一个可以访问每个节点的原始解析字符串(或至少它们的长度)？

可能有比这更简单的解决方案吗？

我确实进行了搜索，但之前找不到任何人问过这个特定问题，所以如果有人知道我错过了什么，我对错误的搜索技巧表示歉意。

Answer 1

搜索可以逐个字符地循环遍历字符串。如果在标签内，则跳过该标签，仅在标签外搜索字符串，并记住部分匹配，以防文本部分匹配然后被另一个标签打断，继续在标签外搜索。