跨越所有单词而不跨越 html

Question

我有一个2.2mb的html文件，纯垃圾由杂技演员生成。 我需要跨越其中的每一个单词。但是我一直得到html页面开始显示部分源代码。

这里有一个小例子：

<p class="s21" style="padding-top: 10pt;padding-left: 31pt;text-indent: 0pt;text-align: left;">CONTINGENCY TIMEL
INES.. • • • • • •• • • • • • • • • • • •• • • • • • ••• • •• • • • • •• • • • • •• • •<span class="s25">
</span><span class="s26"> </span>4-<span class="s27">1</span></p>

.word:hover {
background-color: rgba(0,0,0,0.1);
}

const walkDOM = function (node, func) {
func(node);
node = node.firstChild;
while(node) {
walkDOM(node, func);
node = node.nextSibling;
if (node && node.nextSibling == undefined) {
// console.log(node.innerHTML);
}
}
};

walkDOM(document.body, function(node) {
if (node.nodeName == '#text') {
let pnode = node.parentElement;
pnode.innerHTML = pnode.innerHTML.replace(/(^|</?[^>]+>|s+)([^s<]+)/g, '$1<span class="word">$2</span>');
}
});

https://codepen.io/clankill3r/pen/rNaNmxE

输出：

• • ••• • •• • • • • •• • • • • •• • •class="s25"> class="s26"> 4-1

有没有办法跨越每个单独的单词，而不必避免使用html标签？

Answer 1

已经有一个原生方法可以遍历 DOM 树，你应该使用 TreeWalker API。此方法允许您像尝试的那样仅过滤文本节点，不包含任何元素：

const root = document.getElementById('root');
const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false);
let words = [];
while (treeWalker.nextNode()) {
words = words.concat(treeWalker.currentNode.textContent.split(/(s+)/).filter(e => e.trim().length > 0));
}
console.log(words);

<div id="root">
<p class="s21" style="padding-top: 10pt;padding-left: 31pt;text-indent: 0pt;text-align: left;">CONTINGENCY TIMEL
INES.. • • • • • •• • • • • • • • • • • •• • • • • • ••• • •• • • • • •• • • • • •• • •<span class="s25">
</span><span class="s26"> </span>4-<span class="s27">1</span></p>
</div>

注意，这也在修剪空格，并且在生成的数组中不包括空格，但您可以进行调整。