如何根据Map对应值设置span的title属性并匹配多词关键词？

安全阿岳

2026-8-20

解决方案

1. 设置span的title为Map对应值

原来的代码用$&直接把匹配文本作为title，要替换成Map里的对应值，需要把replace的第二个参数改成函数，这样能拿到匹配内容，再从Map中取出对应值：

const map = new Map(Object.entries(JSON.parse(json)));
// 正则转义函数，处理关键词中的特殊字符
const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const words = [...map.keys()];
const escapedWords = words.map(word => escapeRegExp(word));

var data = document.getElementById("num1").value
$('#fake_textarea').html(data);

// 构建支持多词匹配的正则
var regexp = new RegExp('(' + escapedWords.join('|') + ')', 'ig');

$('#fake_textarea').each(function (num, elem) {
  var text = $(elem).text();
  // 用回调函数动态获取Map对应值作为title
  text = text.replace(regexp, (matched) => {
    // 兼容大小写匹配，根据Map键的实际大小写调整toLowerCase()
    const tooltip = map.get(matched.toLowerCase()) || matched;
    return `<span title="${tooltip}" id="${matched}" style="color:red;"><b>${matched}</b></span>`;
  });
  $(elem).html(text);
});

2. 匹配多词关键词

要匹配"boy girl"这类多词关键词，核心是对关键词中的特殊字符（包括空格）做正则转义，避免正则解析出错：

新增escapeRegExp函数，转义.、*、空格等正则元字符，确保关键词里的空格被当作普通空格匹配
如果需要确保关键词是完整短语（不被其他字符包裹），可以给每个转义后的关键词加上单词边界\b，示例：
```
var regexp = new RegExp('\\b(' + escapedWords.join('|') + ')\\b', 'ig');
```
注意：如果关键词包含非单词字符（比如"hello-world"），\b可能不适用，可根据实际需求调整边界规则。