JavaScript技术求助：仅匹配指定文本时修改文字颜色

没问题！要实现你想要的效果，只需要调整代码的条件判断逻辑，去掉强制设置默认颜色的分支，改成仅当文本匹配目标内容时才应用对应颜色，不匹配时保留元素原本的样式即可。

核心修改点 #

• 移除原代码中的三元运算符（? :）——它会强制给元素设置颜色，无论是否匹配目标文本；
• 改用if条件判断，仅在文本匹配时执行颜色设置操作；
• 可直接复制修改后的代码块，替换搜索文本和对应颜色，实现多场景复用。

修改后的代码示例 #

针对“Equipe Rosa”的版本

$(document).on('knack-view-render.any', function(event, view, data) {
  $("td.field_1416 > span , td.field_1416 > span > i").each(function() {
    // 获取目标文本并去除首尾空格
    const targetText = $(this).find("span").text().trim();
    // 仅当文本匹配时设置颜色
    if (targetText === "Equipe Rosa") {
      $(this).css("color", "#ff00ee");
    }
  });
});

复用修改为“Equipe BRANCA”的版本

$(document).on('knack-view-render.any', function(event, view, data) {
  $("td.field_1416 > span , td.field_1416 > span > i").each(function() {
    const targetText = $(this).find("span").text().trim();
    if (targetText === "Equipe BRANCA") {
      $(this).css("color", "#fff");
    }
  });
});

优化：多文本统一处理（更高效） #

如果你需要针对多个文本设置不同颜色，不需要重复绑定事件，可以把所有判断放在同一个事件回调里，减少冗余：

$(document).on('knack-view-render.any', function(event, view, data) {
  $("td.field_1416 > span , td.field_1416 > span > i").each(function() {
    const targetText = $(this).find("span").text().trim();
    
    if (targetText === "Equipe Rosa") {
      $(this).css("color", "#ff00ee");
    } else if (targetText === "Equipe BRANCA") {
      $(this).css("color", "#fff");
    } else if (targetText === "Equipe VERDE") {
      $(this).css("color", "#00ff00");
    }
    // 可以继续添加更多文本-颜色配对
  });
});

为什么这样改？ #

原代码的三元运算符会强制覆盖元素的颜色样式，不管文本是否匹配；而改用if判断后，只有当文本完全匹配你指定的内容时，才会设置对应颜色，不匹配的元素会保留原本的默认颜色，完全符合你的需求。

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