JavaScript如何高亮主字符串中非连续的子串单词

现有需求：将字符串 From Windows to Linux 中，与子串（如 From Linux、Windows Linux 等）匹配的独立单词分别用 <mark> 标签包裹，最终实现类似 <mark>From</mark> Windows to <mark>Linux</mark> 的效果。

当前实现的函数仅支持高亮连续的子串内容，无法处理非连续单词的场景：

function highlightSearchTerm(string, substring) {
    const regex = new RegExp(`(${substring})`, 'ig');
    return string.replace(regex, '<mark>$1</mark>');
}

修改后的实现方案 #

核心思路是将子串拆分为独立单词，对每个单词分别进行全局不区分大小写的匹配替换：

function highlightSearchTerm(string, substring) {
    // 拆分子串为独立单词，过滤空字符串（处理多空格情况）
    const terms = substring.split(/\s+/).filter(term => term.trim());
    let result = string;
    
    // 遍历每个单词，生成正则并替换
    terms.forEach(term => {
        // 使用 \b 确保匹配完整单词，若需支持部分匹配可移除 \b
        const regex = new RegExp(`\\b(${term})\\b`, 'ig');
        result = result.replace(regex, '<mark>$1</mark>');
    });
    
    return result;
}

调用示例 #

// 非连续子串：From Linux
console.log(highlightSearchTerm("From Windows to Linux", "from linux"));
// 输出：<mark>From</mark> Windows to <mark>Linux</mark>

// 非连续子串：Windows Linux
console.log(highlightSearchTerm("From Windows to Linux", "Windows Linux"));
// 输出：From <mark>Windows</mark> to <mark>Linux</mark>

// 非连续子串：from To
console.log(highlightSearchTerm("From Windows to Linux", "from To"));
// 输出：<mark>From</mark> Windows <mark>to</mark> Linux

说明 #

• 使用 \b 单词边界可以确保只匹配完整单词，避免出现部分匹配（比如不会把 "Linux" 匹配到 "Linuxity" 这类词中），如果需要支持部分匹配，直接移除正则中的 \b 即可。
• 拆分时用 split(/\s+/) 可以处理子串中多个连续空格的情况，过滤空字符串避免无效匹配。

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