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

Posted 2023-05-07

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

【英文标题】：Highlight color on specific text in selection text option

【发布时间】：2021-05-22 00:53:09

【问题描述】：

任何人知道如何放置包含“股票”一词的颜色突出显示（检查图像）。

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

【问题讨论】：

这能回答你的问题吗？ is it possible to add <div> or <span> inside an <option> tag?

【参考方案1】：

试试这个

<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;

【讨论】：

我想我知道你在哪里，你应该看看这个link和这个link as well简而言之，它只是不可能用常规的<select>和@987654326来做到这一点@ 然后用 CSS 设置样式

【参考方案2】：

您可以使用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>

【讨论】：

我尝试将其转换为选择，但它不起作用？也许是我的结局？你能尝试转换吗？

也感谢您编辑我的帖子。我是新手

【参考方案3】：

如果您使用的是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>