CODEWITHSUNDEEP
javascriptjquerycontainskeyword
Jerpl
Jerpl

Reputation: 189

If element contains any of these words then wrap that word in span

I'd like to highlight certain words if they're found within a title by wrapping those words in a span class. Is there a way of writing a list of words to check for and then using the same command to wrap any of those words with the span class?

For example:

<h1>This title contains the word Balloon</h1>
<h1>This title contains the word Oranges</h1>
<h1>This title doesn't contain either of those terms</h1>

Something to check each of those three elements (but there would be 20 or so) for the words Balloon or Oranges and then wrap just those words in a span color.

I could use:

$('h1').html($('h1').html().replace(/(balloon)/g,'<span class="red">balloon</span>'));

but I'd have to write that query for every word, whereas I'd like something a little simpler, if possible.

Upvotes: 2

Views: 1594

Answers (4)

dude
dude

Reputation: 6086

While the answers provided here are theoretically correct, they will use innerHTML which is evil. It will destroy events and triggers DOM generation over and over again. Also, you'll probably need to remove highlights at a time, so you are reinverting the wheel.

There's a plugin that solves your problem: mark.js

Usage can be done e.g. the following way:

$(function(){
  // pass an array to highlight or a simple string term
  $("h1").mark(["Balloon", "Oranges"]);
});
mark{
  background: orange;
  color: black;
}
<script src="https://cdn.jsdelivr.net/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script>
<h1>This title contains the word Balloon</h1>
<h1>This title contains the word Oranges</h1>
<h1>This title doesn't contain either of those terms</h1>

Upvotes: 0

1sloc
1sloc

Reputation: 1180

Loop through your element set, like so, and replace it with anything in an array of keywords:

<h1>This title contains the word Balloon</h1>
<h1>This title contains the word Oranges</h1>
<h1>This title doesn't contain either of those terms</h1>
<h1>This title contains both Balloon and Oranges</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
var wordsToHighlight = ['Balloon', 'Oranges'];
$('h1').each(function() {
  for (var i = 0, l = wordsToHighlight.length; i < l; i++) {
    if ($(this).html().indexOf(wordsToHighlight[i]) !== -1) {
      var newValue = $(this).html().replace(wordsToHighlight[i], 
          '<span>' + wordsToHighlight[i] + '</span>');
      $(this).html(newValue);
    }
  }
});
</script>

Upvotes: 0

adeneo
adeneo

Reputation: 318182

You can keep an array of words, then iterate and replace the words in each header

var words = [
    "balloon",
    "either"
];

$('h1').html(function(_,html) {
    var reg = new RegExp('('+words.join('|')+')','gi');
    return html.replace(reg, '<span class="red">$1</span>', html)
});
.red {color : red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>This title contains the word Balloon</h1>
<h1>This title contains the word Oranges</h1>
<h1>This title doesn't contain either of those terms</h1>

Upvotes: 6

P&#233;ťa Poliak
P&#233;ťa Poliak

Reputation: 411

You can have an object containing all the words you want wrapped (including another specifications eg class or the tag used) and then just iterate over all fields of the object while using your command that just constructs the string to be used.

Upvotes: -1

Related Questions