如何修改DOM中符合[[...]]和{{...}}模式的属性与文本

要实现你需要的DOM修改，需要递归遍历所有DOM节点，分别处理属性中的[[...]]标记和文本中的{{...}}标记，具体实现如下：

核心实现逻辑 #

1. 清理属性中的[[...]]标记：遍历所有元素的属性，将属性值中匹配[[任意内容]]的部分替换为空字符串。
2. 替换文本中的{{...}}标记：遍历所有文本节点，将匹配{{ 内容 }}的部分替换为带指定样式的<span>元素，同时保留原文本的其他部分。

完整代码实现 #

替换原HTML中的<script>部分为以下代码即可：

<script>
function processDOM() {
    // 递归遍历所有节点
    function traverse(node) {
        // 处理元素节点的属性
        if (node.nodeType === Node.ELEMENT_NODE) {
            // 遍历所有属性
            for (let i = 0; i < node.attributes.length; i++) {
                const attr = node.attributes[i];
                // 替换属性值中的[[...]]为空
                attr.value = attr.value.replace(/\[\[.*?\]\]/g, '');
            }

            // 递归处理子节点
            for (const child of node.childNodes) {
                traverse(child);
            }
        }
        // 处理文本节点
        else if (node.nodeType === Node.TEXT_NODE) {
            const text = node.textContent;
            // 匹配{{...}}格式的内容
            const regex = /\{\{(.*?)\}\}/g;
            let match;
            let lastIndex = 0;
            const fragment = document.createDocumentFragment();

            // 逐个匹配并替换
            while ((match = regex.exec(text)) !== null) {
                // 添加匹配前的文本
                if (match.index > lastIndex) {
                    fragment.appendChild(document.createTextNode(text.slice(lastIndex, match.index)));
                }
                // 创建带样式的span元素
                const span = document.createElement('span');
                span.style.color = 'red';
                span.style.fontWeight = 'bold';
                span.textContent = match[1].trim(); // 去除内容前后的空格
                fragment.appendChild(span);
                lastIndex = regex.lastIndex;
            }

            // 添加剩余的文本
            if (lastIndex < text.length) {
                fragment.appendChild(document.createTextNode(text.slice(lastIndex)));
            }

            // 如果有替换内容，替换原文本节点
            if (fragment.childNodes.length > 0) {
                node.parentNode.replaceChild(fragment, node);
            }
        }
    }

    // 从body开始遍历处理
    traverse(document.body);
}

// 页面加载完成后执行处理
window.onload = processDOM;
</script>

代码说明 #

• 递归遍历：确保无论DOM嵌套多深，所有节点和属性都会被处理，适配任意DOM结构
• 属性处理：使用正则/\[\[.*?\]\]/g全局匹配属性中的[[...]]，直接替换为空
• 文本节点处理：通过documentFragment批量处理节点替换，减少DOM重排提升性能；正则/\{\{(.*?)\}\}/g捕获{{}}中的内容，生成对应样式的span元素，同时保留原文本的其他部分

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