JS网页表格文字高亮异常：如何正确高亮‘not fit’短语？

问题根源是替换顺序错误：你先替换了单独的fit，导致“not fit”里的fit被提前包裹成<span class="fit">fit</span>，后续匹配\bnot\sfit\b的正则找不到原始的“not fit”文本，自然没法高亮整个短语。

修改方案：调整替换顺序 #

把长短语“not fit”的替换逻辑放在最前面，先匹配完整短语，再处理单独的fit，避免拆分匹配。

修改后的代码：

$(document).ready(function() {
  $('.dataframe-container table td:nth-child(2)').each(function() {
    var resultValue = $(this).text().trim();

    // 先处理完整短语 "not fit"
    var highlightedValue = resultValue.replace(/\bnot\sfit\b/g, '<span class="not-fit">not fit</span>');
    // 再处理单独的 "fit"
    highlightedValue = highlightedValue.replace(/\bfit\b/g, '<span class="fit">fit</span>');
    // 最后处理 "moderate"
    highlightedValue = highlightedValue.replace(/\bmoderate\b/g, '<span class="moderate">moderate</span>');

    $(this).html(highlightedValue);
  });
});

补充对应的CSS样式（如果还没设置） #

确保你的样式表中有这些类，来实现对应的颜色高亮：

.fit { color: green; }
.not-fit { color: blue; }
.moderate { color: orange; }

这样调整后，“not fit”会被完整匹配并包裹成蓝色的span，而不会被提前拆分的fit干扰。

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