Jquery find specific word inside div and style it-CodePudding

Is there any way to find a specific word and style it with jquery ?

I know, how to do it. But for my case, its not working. Similar questions is here : How can I find elements by text content with jQuery?

But it design full div, not the specific word or span.

For example, if any div contain any word "mi-" , it will design this section only. I said (mi-) area only, Design can be whatever. Another condition is that, it will also design any suffix if have. Suppose, if there's any word after mi-, it will design it too.

Like that:

"mi-" will be designed.
"mi-code" will be designed
"mi-code-area" will be designed
"mi-code-box-area" will be designed

Thats mean all the words including mi- will be designed. How can I do it.

CodePudding user response：

To find a specific word and style it with jQuery, you can use the :contains selector to select elements that contain the desired word, and then use the css method to apply styles to those elements. For example, to find all elements that contain the word "mi-" and make them red, you could use the following code:

$(':contains("mi-")').css('color', 'red');

This code will select all elements that contain the word "mi-", including elements that have other words before or after "mi-". If you only want to select elements that have the exact word "mi-", you can use the filter method to further refine the selection. For example, the following code will only select elements that contain the exact word "mi-", and not elements that contain words that start with "mi-":

$(':contains("mi-")').filter(function() {
  return $(this).text() === "mi-";
}).css('color', 'red');

You can then use the css method to apply styles to the selected elements. For example, the following code will make all elements that contain the exact word "mi-" bold and red:

$(':contains("mi-")').filter(function() {
  return $(this).text() === "mi-";
}).css({
  'font-weight': 'bold',
  'color': 'red'
});

Keep in mind that the :contains selector is case-sensitive, so it will only match elements that contain the exact word "mi-" in the case specified. If you want to match words regardless of case, you can use the .filter method with a regular expression to match any word that starts with "mi-". For example, the following code will match elements that contain words that start with "mi-" regardless of case:

$(':contains("mi-")').filter(function() {
  return /^mi-/i.test($(this).text());
}).css({
  'font-weight': 'bold',
  'color': 'red'
});

You can use the .filter method to add any additional conditions you want, such as matching only elements that have a specific class, or that are located within a certain container element. This allows you to fine-tune the selection of elements to style, and to customize the styles applied to those elements.

CodePudding user response：

I try ro write in simplest way, you can improve or wrap it in a function with keyword as input:

$(':contains("mi-")').each(function(){
   var myHtml =$(this).html();
   myHtml = myHtml.replace('mi-','<span >'  'mi-'   '</span>');
   $(this).html(myHtml);
})

where myStyle is your desired CSS class.