Find words from a list and wrap each in a span?

Question

I'd like to dynamically check a paragraph for a list of words and then wrap those words in a span tag if found.

Example:

<p class="para">
My house is red and my front door is blue.
</p>

How could I check for the words 'house', 'red', 'door', and 'blue', as well as any others I might add to the paragraph, and then wrap them in a simple span tag which I can then style with css?

I've searched and found answers for individual words, but being a complete novice I'm not sure how to check for a list of them which I can add to.

Have you at least tried to modify one of those answers you have found to fit your needs? Any attempt of your own? — NewToJS, Jul 15 '17 at 20:39

score 1 · Accepted Answer · answered Jul 15 '17 at 20:49

1

Javascript has great regular expressions - you could use those.

    var words = ['house', 'red', 'door', 'blue'];
    // create a regular expression matching any of these words, using 'g' flag to match all instances
    var regexp = new RegExp('(' + words.join('|') + ')', 'ig');

    $('p.para').each(function(num, elem) {
        var text = $(elem).text();
        // use string.replace with $& notation to indicate whatever was matched
        text = text.replace(regexp, '<span class="$&">$&</span>');
        $(elem).html(text);
    });

This will put all your words in a span with matching name, ex <span class="house">house</span>. You could make it the same class for each one just by replacing the first '$&' with some predefined class.

answered Jul 15 '17 at 20:49

arbuthnott

3,819
2
8
21

Note, this will remove any previous html formatting from the paragraphs affected. – arbuthnott Jul 15 '17 at 20:50
Thanks. This is what I was looking for. Is there a way to check words regardless of upper or lower case lettering? – Jerpl Jul 15 '17 at 20:55
@Jerpl `i` flag in `RegExp` means case-insensitive. – Vadim Ovchinnikov Jul 15 '17 at 21:01
By the way it's better [escape words for `Regexp` here](https://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript). – Vadim Ovchinnikov Jul 15 '17 at 21:05
why each is needed here? – Koushik Chatterjee Jul 15 '17 at 21:06
@KoushikChatterjee, each is used in case more than one paragraph needs it's words wrapped. – arbuthnott Jul 15 '17 at 21:32
yeah, right. in case all paragraph with class para needs the operation :) – Koushik Chatterjee Jul 15 '17 at 22:50

score 1 · Answer 2 · answered Jul 15 '17 at 21:10

I gave a nice javascript-only demo, with no jQuery.

https://jsfiddle.net/66hujh1e/

(function() {
  var paragraph = document.getElementsByClassName('para')[0];
  var text = paragraph.innerHTML;

  var wordArr = text.split(' ');
  text = [];
  wordArr.forEach(function(el) {
   if(el === 'house' || el === 'red')
     el = '<span class="matched">' + el + '</span>';
    text.push(el);
  });
  console.log(text);
  text = text.join(' ');
  paragraph.innerHTML = text;
})()

.matched {
  background-color: red;
  font-weight: bold;
}

<p class="para">
My house is red and my front door is blue.
</p>

Basically, you just want to get the text, split it and process it and then put it back together, and assign it back as that nodes text. There's more elegant ways to do this with regex's and such, but basing this on low-level understanding I thought this illustrated the logic a little better.

Koushik Chatterjee · Answer 3 · 2017-07-15T21:16:05.787

0

function wrapWithSpan(str){
    var outerDom = $('p.para');
    outerDom.html(outerDom.html().replace(RegExp(str,'ig'), '<span>' + str + '</span>'))
}

or if you have an array, you can try this

function wrapWithSpan(strArr){
    var outerDom = $('p.para');
    outerDom.html(outerDom.html().replace(RegExp(strArr.join('|'),'g'), 
    function(token){
        return '<span>' + token + '</span>';
    });
}

edited Jul 15 '17 at 21:16

answered Jul 15 '17 at 20:41

Koushik Chatterjee

4,106
3
18
32

score 0 · Answer 4 · answered Jul 15 '17 at 20:43

Possible solution.

const words = ['house', 'red', 'door', 'blue'];
let elem = document.querySelector('.para');

elem.innerHTML = elem.textContent.split(' ').map(v => {
  return words.indexOf(v) > -1 ? `<span class='r'>${v}</span>` : v;
}).join(' ');

.r {
  color: blue;
}

<p class="para">
  My house is red and my front door is blue.
</p>

Find words from a list and wrap each in a span?

4 Answers4

Linked