Question

以下是示例节点

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

我的目标是extract all the 'locate' class nodes along with their start character/text position（以后，我可以重复使用该文本/字符位置来注入节点）

实施例：

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

删除locate个节点为Hello wor ld`

到目前为止，我尝试了： treeWalker = document.createTreeWalker（input，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并从iterator对象获取接受节点的索引值。

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

1 个答案: