如何使用jQuery高亮HTML select元素option中的指定单词？

首先得说明：部分老旧浏览器对<option>标签内的HTML支持有限，但Chrome、Firefox、Edge这类现代主流浏览器都能正常识别<option>里的<span>标签，所以这个方案在绝大多数场景下是可行的。

步骤1：定义高亮样式 #

先给需要特殊颜色的单词准备CSS类：

.not {
    color: red;
}
.but {
    color: green;
}

步骤2：编写jQuery替换逻辑 #

我们需要遍历每个<option>，把目标单词用带样式类的<span>包裹起来。这里特意用了单词边界正则\b，避免误替换包含目标词的其他词汇（比如不会把"nothing"里的"not"换掉），同时也做了防重复替换的考虑：

$(document).ready(function() {
    // 遍历所有select下的option
    $('select option').each(function() {
        let originalText = $(this).text();
        // 替换独立的"not"为红色span
        let updatedText = originalText.replace(/\bnot\b/g, '<span class="not">not</span>');
        // 再替换独立的"but"为绿色span
        updatedText = updatedText.replace(/\bbut\b/g, '<span class="but">but</span>');
        // 将处理后的HTML重新赋值给option
        $(this).html(updatedText);
    });
});

完整可运行示例 #

把所有部分整合起来的完整代码：

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .not {
            color: red;
        }
        .but {
            color: green;
        }
    </style>
</head>
<body>
    <select>
        <option value="volvo">Volvo</option>
        <option value="saab">not Saab</option>
        <option value="vw">VW</option>
        <option value="audi">but Audi</option>
    </select>

    <script>
        $(document).ready(function() {
            $('select option').each(function() {
                let originalText = $(this).text();
                let updatedText = originalText.replace(/\bnot\b/g, '<span class="not">not</span>');
                updatedText = updatedText.replace(/\bbut\b/g, '<span class="but">but</span>');
                $(this).html(updatedText);
            });
        });
    </script>
</body>
</html>

额外注意点 #

• 动态生成的Option：如果你的<select>是通过AJAX或其他方式动态加载的，要确保在元素完全渲染完成后再执行这段jQuery代码（比如放在AJAX的success回调里，或者用事件监听元素添加完成的时机）。
• 浏览器兼容：如果需要兼容IE8及以下的老旧浏览器，这个方法会失效（旧IE不支持<option>内的HTML元素），但现代浏览器都没有问题。

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