Highlight color on specific text in selection text option

Question

Anyone idea how do I put a color highlight containing the word "stock" (check the image).

CSS, JavaScript, jQuery, or any language will do.

Does this answer your question? [is it possible to add
or inside an — Augustin, Feb 21 '21 at 06:58

score 1 · Answer 1 · answered Feb 19 '21 at 02:20

1

try this

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

and css style with

select option span{
  color: #ff0000;
}

answered Feb 19 '21 at 02:20

Augustin

61
1
10

1

I think I get where you're at, you should look at this [link](https://stackoverflow.com/questions/11890597/is-it-possible-to-add-div-or-span-inside-an-option-tag) and this [link as well](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element) in short, its just not possible to do it with the regular ` – Augustin Feb 19 '21 at 03:40

score 0 · Answer 2 · answered Feb 19 '21 at 02:26

0

You can use RegExp to find the desire word and wrap your word with a span tag using replaceWith.Apply class on span tag to give desire color.

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>

answered Feb 19 '21 at 02:26

4b0

21,981
30
95
142

I try to convert it to selection but it does not work? maybe is from my end? can you please try to convert? – Joshua Feb 19 '21 at 03:12
also thank you for editing my post. I am newbie – Joshua Feb 19 '21 at 03:13

score 0 · Answer 3 · answered Feb 19 '21 at 05:29

If you are using select2 then you can do it like below. You can highlight search text

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>

Highlight color on specific text in selection text option

3 Answers3