如何改进JavaScript网页单词索引方案？解决浏览器扩展样式异常

我想在浏览器扩展的Content Script里写一个JavaScript函数，给绝大多数网站的每个单词套一个<span>元素，用id标注索引，之后能通过索引（比如id=54）选中span修改CSS。

现在用了一段递归函数（黄色背景是调试用的，后续会删掉），还打算加id冲突处理，但这个实现导致部分网站样式异常：比如文本变大、间距增加，在DuckDuckGo深色模式下会把深色背景换成白色，文字看不清。

现有代码如下：

let initidx = 0;

function run_element(element, parent)
{
    if(element.nodeType == Node.ELEMENT_NODE)
    {
        let childList = [];
        for(let child of element.childNodes) //probably a better way to copy the list of children before it gets modified.
        {
            childList.push(child);
        }
        for(let child of childList)
        {
            run_element(child, element);
        }
    }
    else if(element.nodeType == Node.TEXT_NODE)
    {
        for(let word of element.nodeValue.split(" "))
        {
            if(word != "" && word != "\n")
            {
                let span = document.createElement('span');
                span.appendChild(document.createTextNode(word));
                span.id = initidx.toString();
                span.style = "background:yellow;"
                initidx++;
                parent.insertBefore(document.createTextNode('\xa0'), element);
                parent.insertBefore(span, element);
            }
        }
        parent.removeChild(element);
    }
}

run_element(document.body, null);

改进方案 #

1. 修复空格处理逻辑，避免布局混乱 #

原代码用split(" ")拆分单词会破坏原有空格结构，还会插入非换行空格\xa0导致间距异常。改用正则匹配单词并保留原始空格：

• 用正则/(\s*)([\w\p{P}\p{L}]+)(\s*)/gu匹配单词及前后空格，覆盖多语言字符和常用标点
• 用文档片段一次性替换文本节点，避免多次DOM操作打乱顺序

2. 避免硬编码样式破坏网站主题 #

不要直接给span写background:yellow这种内联样式，改用自定义类名，通过外部CSS控制样式，强制继承原文本属性：

/* 在Content Script的CSS文件中添加 */
.word-index-span {
    background-color: yellow !important;
    font-size: inherit !important;
    line-height: inherit !important;
    display: inline !important;
    color: inherit !important;
}

3. 跳过无需处理的元素 #

遍历DOM时跳过脚本、样式、iframe、图片等元素，避免无效操作和异常：

const skipTags = ['SCRIPT', 'STYLE', 'IFRAME', 'IMG', 'INPUT', 'TEXTAREA'];
if (skipTags.includes(element.tagName) || element.hasAttribute('contenteditable')) {
    return;
}

4. 优化索引id，减少冲突 #

不要用纯数字作为id，改用前缀+数字的形式，比如word-index-54，如果担心冲突还可以检查id是否已存在：

span.id = `word-index-${initidx}`;

完整改进后代码 #

let initidx = 0;
const skipTags = ['SCRIPT', 'STYLE', 'IFRAME', 'IMG', 'INPUT', 'TEXTAREA'];
// 匹配单词及前后空格，支持多语言和常用标点
const wordRegex = /(\s*)([\w\p{P}\p{L}]+)(\s*)/gu;

function run_element(element, parent) {
    if(element.nodeType == Node.ELEMENT_NODE) {
        // 跳过不需要处理的元素和可编辑元素
        if (skipTags.includes(element.tagName) || element.hasAttribute('contenteditable')) {
            return;
        }
        // 用Array.from快速复制子节点列表
        const childList = Array.from(element.childNodes);
        for(let child of childList) {
            run_element(child, element);
        }
    } else if(element.nodeType == Node.TEXT_NODE) {
        const text = element.nodeValue;
        if (!text.trim()) return; // 跳过纯空白文本节点
        
        const fragment = document.createDocumentFragment();
        wordRegex.lastIndex = 0; // 重置正则索引，避免多次调用出错
        let match;
        while ((match = wordRegex.exec(text)) !== null) {
            const [, leadingSpace, word, trailingSpace] = match;
            
            // 添加前置空格
            if (leadingSpace) {
                fragment.appendChild(document.createTextNode(leadingSpace));
            }
            
            // 处理非空白单词
            if (word.trim()) {
                const span = document.createElement('span');
                span.id = `word-index-${initidx}`;
                span.className = 'word-index-span';
                span.textContent = word;
                fragment.appendChild(span);
                initidx++;
            }
            
            // 添加后置空格
            if (trailingSpace) {
                fragment.appendChild(document.createTextNode(trailingSpace));
            }
        }
        
        parent.replaceChild(fragment, element);
    }
}

run_element(document.body, null);

内容的提问来源于stack exchange，提问作者Robert