在选择文本选项中突出显示特定文本的颜色

如何解决在选择文本选项中突出显示特定文本的颜色

任何人都知道如何添加包含“股票”一词的颜色突出显示（查看图片）。

CSS、JavaScript、jQuery 或任何语言都可以。

解决方法

试试这个

<select>
  <option>ARMAGEL HT 5MM ROLL(S) BLANKET TYPE(<span>STOCKS</span>:5 from)</option>
  <option>ARMAGEL HT 5MM ROLL(S) BLANKET TYPE(<span>STOCKS</span>:5 from)</option>
  <option>ARMAGEL HT 5MM ROLL(S) BLANKET TYPE(<span>STOCKS</span>:5 from)</option>
</select>

和css样式

select option span{
  color: #ff0000;
}

,

您可以使用 RegExp 找到想要的单词，并使用 replaceWith 用 span 标签将您的单词包裹起来。在 span 标签上应用类以提供想要的颜色。

var ChangeColor = 'Stocks';
var rgx = new RegExp('\\b(' + ChangeColor + ')\\b','ig');

$('div').contents().each(function() {
  $(this).replaceWith($(this).text().replace(rgx,'<span class="red">$1</span>'));
});

.red {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  Some text(Stocks)
</div>
<div>
  Some text( Stocks 1)

</div>

,

如果您使用的是 select2，那么您可以像下面那样操作。您可以突出显示搜索文本

CSS

<style>
.select2-rendered__match {
    background-color: greenyellow;
}
</style>

JS

<script>
    function markMatch(text,term) {
        var regEx = new RegExp("(" + term + ")(?!([^<]+)?>)","gi");
        var output = text.replace(regEx,"<span class='select2-rendered__match'>$1</span>");
        return output;
    }

    var query = {};
    $('.js-data-example-ajax').select2({
        allowClear: true,minimumInputLength: 2,escapeMarkup: function(markup) {
            return markup;
        },language: {
            searching: function(params) {
                // Intercept the query as it is happening
                query = params;
                // Change this to be appropriate for your application
                return 'Searching…';
            }
        },templateResult: function(item) {
            if (item.loading) {
                return item.text;
                term = query.term || '';
                return markMatch(item.text,term);
            },}
    });
</script>