如何修改网页注入脚本使其仅匹配精确关键词‘Taxi’或‘Electric’？

问题说明 #

当前使用的网页注入脚本会在页面文本包含taxi或electric时将背景设为粉色，但像Electrical这类包含目标词的相似词也会误触发匹配，需要调整代码，实现仅匹配作为独立单词存在的‘Taxi’或‘Electric’（即关键词不包含在其他单词中）。

原代码 #

// This script will be injected into all web pages
const bodyText = document.body.innerText.toLowerCase();

if (bodyText.includes("taxi") || bodyText.includes("electric")) {
  document.body.style.backgroundColor = "PINK";
}

修改方案 #

要避免子串误匹配，核心是用**正则表达式的单词边界(\b)**来限定匹配范围，确保只有独立的单词会被检测到。同时添加大小写不敏感标识，兼容关键词的不同大小写写法。

修改后的代码：

// This script will be injected into all web pages
const keywordRegex = /\b(taxi|electric)\b/i;
const bodyText = document.body.innerText;

if (keywordRegex.test(bodyText)) {
  document.body.style.backgroundColor = "PINK";
}

关键细节解释 #

• \b：匹配单词与非单词字符（比如空格、标点、换行）之间的边界，彻底避免Electrical、taxicab这类包含目标词的单词被误匹配。
• (taxi|electric)：正则的分支语法，匹配两个关键词中的任意一个。
• i：大小写不敏感标志，不管关键词是Taxi、TAXI还是electric、ELECTRIC都能被正确匹配。
• test()：正则对象的方法，高效检查文本中是否存在符合规则的内容，返回布尔值用于判断。

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