如何用JavaScript实现不区分大小写匹配子串并保留原大小写用<b>包裹

你当前的实现确实绕了弯路，其实利用正则表达式的replace方法结合内置特性就能极简解决这个问题——无需手动处理索引、分割数组这些复杂步骤，直接就能拿到匹配到的原大小写格式的子串并包裹标签。

简化后的实现代码 #

// 转义正则特殊字符，避免正则语法冲突
function regEscape(v) {
    return v.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')
}

// 核心函数：不区分大小写匹配，保留原内容格式并加粗
function boldSubstring(source, substr) {
    if (!substr.trim()) return source; // 处理空串或纯空格的边界情况
    const regex = new RegExp(regEscape(substr), "ig");
    // $& 代表正则匹配到的原始内容（自动保留原大小写）
    return source.replace(regex, '<b>$&</b>');
}

// 测试用例1：搜索单个字符't'
const searchStr1 = 't'
const tests1 = [
  {
    in: 'Default description.',
    out: 'Defaul<b>t</b> descrip<b>t</b>ion.'
  },
  {
    in: 'Tiger toe',
    out: '<b>T</b>iger <b>t</b>oe'
  },
  {
    in: 'TTiger ttoe',
    out: '<b>T</b><b>T</b>iger <b>t</b><b>t</b>oe'
  },
  {
    in: 'T1234',
    out: '<b>T</b>1234'
  },
  {
    in: 't1234',
    out: '<b>t</b>1234'
  },
]

// 测试用例2：搜索子串'ti'
const searchStr2 = 'ti'
const tests2 = [
  {
    in: 'Default description.',
    out: 'Default description.'
  },
  {
    in: 'Tiger toe',
    out: '<b>Ti</b>ger toe'
  },
  {
    in: 'TTiger ttoe',
    out: 'T<b>Ti</b>ger ttoe'
  },
  {
    in: 'T1234',
    out: 'T1234'
  },
  {
    in: 't1234',
    out: 't1234'
  },
]

// 测试执行函数
function test(search, tests) {
  tests.forEach(testPair => {
    const result = boldSubstring(testPair.in, search)
    const passed = result === testPair.out
    if (passed) console.log('Passing:', result, '===', testPair.out)
    else console.log('Failing:', result, '!==', testPair.out)
  })
}

// 运行测试
test(searchStr1, tests1)
test(searchStr2, tests2)

实现说明 #

• 核心逻辑：正则replace方法里的$&会直接引用匹配到的原始文本，自动保留原字符串的大小写格式，不用手动从原串截取内容
• 边界处理：增加了空串/纯空格的判断，避免无效匹配导致的异常
• 简洁性：去掉了原代码中处理索引、分割数组、拼接元素的冗余逻辑，代码更易读、更可靠

运行上述代码后，所有测试用例都会通过，完全满足需求。

内容的提问来源于stack exchange，提问作者J.Todd