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

Question

以下是一个示例节点，

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

我的目标是提取所有“定位”类节点及其起始字符/文本位置(因此稍后，我可以重用该文本/字符位置来注入(inject)节点)

例如:

<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>"
    }
]

1. 移除 locate 节点到 Hello world`

到目前为止我已经尝试过: treeWalker = document.createTreeWalker(输入, NodeFilter.SHOW_ALL);

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);                               
        }
    }
} 

我尝试使用 TreeWalker 来收集节点和起始位置，但是，我找不到任何地方。

我也觉得我计算 text 长度的方式是错误的。可能是更好的方法？

整个过程的思路是，在发生一些文本更改后，使用开始位置和收集到的节点，重新应用收集到的locate 节点。

Answer 1

试试这个(抱歉代码段中的缩进错误):

var nodeIterator = document.createNodeIterator(
  document.getElementById('someId'),

  NodeFilter.SHOW_ELEMENT,

    { acceptNode: function(node) {
      if ( node.className == 'locate' ) {
        return NodeFilter.FILTER_ACCEPT;
      }
    }
  },
  false
);


var node;
var doc = document.getElementById('someId').textContent;

var result = [];
var currentStart = 0;

while ((node = nodeIterator.nextNode())) {

  var tempDoc = doc.slice(currentStart, doc.length);
  var idx = tempDoc.indexOf(node.textContent);  
	var temp = {};  
  
	temp.start = currentStart + idx;
	temp.node = node.outerHTML;

	currentStart += (idx + node.textContent.length);

	result.push(temp);
    
}

console.log(result)

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

请注意，我使用 SHOW_ELEMENT 是因为您可以通过元素类名来区分需要什么。所以稍后你可以在迭代器中设置一个规则，只接受那些节点。

然后我获取根元素的 textContent 并从迭代器对象获取接受节点的索引值。