如何在JavaScript中对字符串非匹配部分添加加粗高亮？

安全阿岳

2026-8-14

解决方法

要实现反转高亮（即加粗目标字符串之外的部分），可以通过以下两种方式实现：

方法1：正则分组匹配

通过正则分组拆分原字符串，将目标字符串前的内容包裹加粗标签，保留目标字符串原样：

var word = 'thisistheword';
var string = 'istheword';
// 转义字符串中的正则特殊字符，避免匹配异常
var escapedString = string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
// 匹配前缀内容与目标字符串的分组
var result = word.replace(new RegExp(`^(.*?)(${escapedString})$`, 'gi'), '<b>$1</b>$2');
console.log(result); // 输出 <b>this</b>istheword

说明：

escapedString：转义string中的正则特殊字符（如.、*等），防止这些字符被当作正则语法解析导致匹配错误
正则^(.*?)(${escapedString})$：
- ^ 匹配字符串开头，$ 匹配字符串结尾
- (.*?) 非贪婪匹配目标字符串之前的所有内容，作为第一个分组
- (${escapedString}) 匹配目标字符串本身，作为第二个分组
替换逻辑：将第一个分组（即this）用<b>标签包裹，拼接第二个分组（即istheword）

方法2：直接字符串截取

如果确定string是word的后缀，直接截取前缀并拼接标签更高效：

var word = 'thisistheword';
var string = 'istheword';
if (word.endsWith(string)) {
  var prefix = word.slice(0, -string.length);
  var result = `<b>${prefix}</b>${string}`;
  console.log(result); // 输出 <b>this</b>istheword
}