JavaScript-提取特定节点以及节点开始位置

下面是一个示例节点

<div>Hell<span class="locate">Q1</span>o <b>w<span class="locate">Q2</span>or</b>ld</div>

提取类似于

输出： 1。提取

[
    {
        "start": 5,
        "node": "<span class='locate'>Q1</span>"
    },
    {
        "start": 9,
        "node": "<span class='locate'>Q2</span>"
    }
]

我尝试使用

TreeWalker

来收集节点和开始位置，但是，我没有得到任何位置

我还觉得我计算

文本长度的方法是错误的。也许是更好的方法

整个过程的思想是，在发生某些文本更改后，使用开始位置和收集的节点重新应用收集的
定位
节点。
尝试此操作（抱歉代码段中的缩进错误）：


var nodeIterator=document.createNodeIterator(
document.getElementById（'someId'），
NodeFilter.SHOW_元素，
{acceptNode:函数（节点）{
如果（node.className=='locate'）{
返回NodeFilter.FILTER\u接受；
}
}
},
假的
);
var节点；
var doc=document.getElementById（'someId'）.textContent；
var结果=[]；
var currentStart=0；
while（（node=nodeIterator.nextNode（））{
var tempDoc=doc.slice（当前开始，文档长度）；
var idx=tempDoc.indexOf（node.textContent）；
var temp={}；
温度启动=电流启动+idx；
temp.node=node.outerHTML；
currentStart+=（idx+node.textContent.length）；
结果：推送（温度）；
}
console.log（结果）
HellQ1o wQ1orldQ1
什么是
start position
character/text position.Thx。这是一个很好的解决方案，但是，如果两个“locate”在
doc中有相同的文本，indexOf
将获取第一个位置以进行第二次匹配。例：
HellQ1o wQ1orld
我编辑了我的帖子-不能说我测试了100%，但似乎效果很好。其思想是通过最后找到的索引删除根容器的元素，然后在该结果中找到下一项的索引。如果出现问题，请发表评论
[
    {
        "start": 5,
        "node": "<span class='locate'>Q1</span>"
    },
    {
        "start": 9,
        "node": "<span class='locate'>Q2</span>"
    }
]

while(treeWalker.nextNode()) {
    temp = {};
    currentNode = treeWalker.currentNode;
    if (currentNode.parentNode.tagName.toLowerCase() === 'div') {
        totalText += currentNode.textContent.length;
        if (
            currentNode.className &&
            currentNode.className.toLowerCase() === 'locate'
        ) {
            temp.startPosition = totalText;
            temp.node = currentNode.cloneNode(true);
            collectorArray.push(temp);
            console.log(currentNode, totalText);                               
        } else {
            updatedNode.appendChild(currentNode.cloneNode(true));
            console.log(currentNode, totalText);                               
        }
    }
}