JavaScript避免重复替换已替换文本：实现文本框关键词标红功能

我来帮你解决这个问题——核心思路是每次都基于原始文本重新生成标红内容，而不是在已处理的HTML上做二次替换，这样就能彻底避免重复标红的问题。下面是完整的可运行代码，以及关键细节的解释：

<textarea id="checked-words" placeholder="每行输入一个要标红的关键词"></textarea>
<br />
<textarea id="words" onkeyup="displayColoredText()" placeholder="输入要处理的文本"></textarea>
<div id="text-to-insert" style="margin-top:10px;"></div>

<script>
function displayColoredText() {
    // 获取两个输入框的内容
    const checkedWords = document.getElementById('checked-words').value.trim();
    const originalText = document.getElementById('words').value;
    const targetDiv = document.getElementById('text-to-insert');

    // 如果没有关键词，直接显示原始文本
    if (!checkedWords) {
        targetDiv.textContent = originalText;
        return;
    }

    // 拆分关键词并过滤空行
    const keywords = checkedWords.split('\n').filter(word => word.trim() !== '');
    if (keywords.length === 0) {
        targetDiv.textContent = originalText;
        return;
    }

    // 转义关键词中的正则特殊字符，避免匹配异常
    const escapedKeywords = keywords.map(word => word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
    // 构建全局匹配的正则表达式（gi表示全局+忽略大小写，可按需调整）
    const regexPattern = new RegExp(escapedKeywords.join('|'), 'gi');

    // 基于原始文本生成带标红的HTML
    const coloredText = originalText.replace(regexPattern, match => `<span style="color:red">${match}</span>`);

    // 将全新的结果插入到目标div中
    targetDiv.innerHTML = coloredText;
}
</script>

关键细节说明： #

• 彻底解决重复替换问题：每次触发输入事件时，我们都从第二个textarea拿原始未处理的文本重新处理，而不是修改div里已有的HTML。这样完全不会碰到已标红的<span>标签被重复匹配的情况，从根源上杜绝了嵌套或错误替换的bug。
• 兼容特殊关键词：对关键词中的正则特殊字符（比如.、*、+这类）做了转义处理，确保像aaa...这类带特殊符号的关键词也能准确匹配。
• 灵活的输入方式：支持每行输入一个关键词，自动过滤空行，适配不同的输入习惯。
• 边界情况处理：如果第一个textarea没有有效关键词，直接显示原始文本，避免不必要的计算。

测试一下：在第一个textarea输入aaa...，第二个输入包含该内容的文本，你会看到所有匹配的部分都被正确标红，而且不管怎么触发输入事件，都不会出现重复处理的问题。

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