TypeScript-Angular中contentEditable正则匹配循环异常问题

问题根源 #

手动输入时，每次keydown事件触发后，短关键词（如"hello"）会被先替换为带span的HTML标签。当后续输入" world"时，contentEditable中的内容变为<span style="color:purple">hello</span> world，此时正则无法匹配到连续的"hello world"纯文本；而粘贴操作是一次性传入完整纯文本，因此能正常匹配长短语。

原代码存在两个核心问题：

• 多次循环替换导致短词优先覆盖长词的匹配机会
• 直接基于带HTML标签的内容进行匹配，破坏了关键词的连续性

解决方案 #

1. 优化正则匹配逻辑 #

将关键词按长度从长到短排序，构建合并正则一次性完成替换，确保长短语优先匹配；同时转义关键词中的正则特殊字符，避免匹配错误。

2. 基于纯文本处理contentEditable内容 #

每次处理前先提取contentEditable的纯文本，处理完成后再将带样式的HTML设置回去，避免已有HTML标签干扰匹配。

修改后的代码 #

正则处理函数 #

searchByRegEx(wordsArr: string[], sentence: string): string {
    // 按长度从长到短排序，保证长短语优先匹配
    const sortedWords = [...wordsArr].sort((a, b) => b.length - a.length);
    // 转义正则特殊字符（如. * +等），避免匹配异常
    const escapedKeywords = sortedWords.map(word => 
        word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
    );
    // 构建匹配所有关键词的正则，全局不区分大小写
    const matchRegex = new RegExp(`(${escapedKeywords.join('|')})`, 'gi');
    // 一次性替换所有匹配项
    return sentence.replace(matchRegex, 
        `<span style='color:${InputColorsHighlightValue.PURPLE}'>$1</span>`
    );
}

contentEditable调用逻辑 #

// 假设contentEditable元素通过ViewChild获取
@ViewChild('editableDiv') editableDiv!: ElementRef<HTMLElement>;

handleKeyDown() {
    if (this.labels) {
        // 提取纯文本内容
        const plainText = this.editableDiv.nativeElement.textContent || '';
        // 处理纯文本得到带样式的HTML
        const processedHtml = this.searchByRegEx(['hello', 'hello world'], plainText);
        // 设置回contentEditable
        this.editableDiv.nativeElement.innerHTML = processedHtml;
        // 恢复光标位置（可选，避免替换后光标跳转到开头）
        this.restoreCursorPosition();
    }
}

// 可选：恢复光标位置的辅助函数
restoreCursorPosition() {
    const element = this.editableDiv.nativeElement;
    const selection = window.getSelection();
    if (selection) {
        const range = document.createRange();
        range.selectNodeContents(element);
        range.collapse(false); // 光标移到末尾
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

关键说明 #

• 排序关键词：确保"hello world"比"hello"先被匹配，避免短词提前占用匹配位置
• 转义特殊字符：如果关键词包含.、*等正则元字符，转义后才能正确匹配
• 纯文本处理：彻底避免HTML标签对关键词连续性的破坏，手动输入和粘贴行为保持一致
• 光标恢复：替换HTML后光标会默认回到开头，添加该函数可优化用户体验

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