自定义用户脚本：循环使用jQuery :contains匹配指定用户方案是否高效？

你的方案不算高效，核心问题在于两点：

• 每次遍历坏用户列表都会重复执行DOM查询$("span.username:contains(badUserName)")，多次DOM操作会累积性能开销，尤其当坏用户数量较多时更明显。
• jQuery的:contains属于非标准选择器，浏览器无法借助原生CSS引擎优化，每次匹配都需要遍历元素逐一检查文本内容，效率低于原生方法。

更高效的实现思路 #

1. 单次DOM查询：先一次性获取所有span.username元素，避免重复查询DOM
2. 批量文本匹配：将坏用户列表拼接成正则表达式，一次性完成所有元素的文本检查

示例代码：

const badUserNames = ["EvilJoe", "ToxicWill", "NegativeSara"];
// 构建正则（若用户名含特殊字符需提前转义，此处假设无特殊字符）
const badUserRegex = new RegExp(badUserNames.join('|'), 'i'); // 'i'为不区分大小写，可按需移除

// 一次性获取所有目标元素后遍历处理
$('span.username').each(function() {
  if (badUserRegex.test($(this).text())) {
    $(this).append(" - bad guy");
  }
});

额外优化建议 #

• 若页面存在动态加载的用户元素，可将匹配逻辑封装为函数，在新元素加载完成后调用，避免重复遍历整个DOM
• 如果坏用户数量极大，正则性能下降时，可将用户名存入Set，通过文本拆分或直接检查的方式匹配（多数场景下正则仍更高效）

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