Highlight a word's parent using jQuery?

Question

Let's say for example that I have a webpage.

<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>

I want to find all instances of the word 'Lorem' and manipulate them in two ways:

Wrap it with <mark> HTML5 element
Run .addClass('look-at-me'); on its parent element.

So the resulting HTML would be

<ul>
  <li class="look-at-me"><mark>Lorem</mark> ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>

I've read all the comments on Highlight a word with jQuery and I've been playing around with the JS code from highlight: JavaScript text higlighting jQuery plugin but both of these deal with ONLY highlighting the word in context. I manipulated the code to wrap the word using <mark> but I'm not skilled enough with JS to achieve my #2 goal of highlighting the parent container. I'm eager to see your helpful suggestions. Thanks!

EDIT: SOLVED! http://jsfiddle.net/GB8zP/1/

Can you post an example on jsfiddle.net where you got the individual word wrapping to work? — Explosion Pills, Mar 07 '13 at 17:12
So basically you want to find a word, and append divs around it, am i correct? edit: sorry maybe not append div around it but append a class to the element/
Here's a similar setup I provided in an answer a while back: http://stackoverflow.com/a/9240077/451969 It could be retrofitted to add a class to the parent's easy enough. Edit: Like this: http://jsfiddle.net/JaN75/40/ — Jared Farrish, Mar 07 '13 at 17:22
Am I oversimplifying the issue here? http://jsfiddle.net/Bkbsw/2/ — Jared Farrish, Mar 07 '13 at 17:34
Given that you already have the word wrapping working, why not just run `$('mark').parent().addClass('look-at-me');` after you run your highlight function? — dnagirl, Mar 07 '13 at 17:34
Looks like you just updated your fiddle to use my example. Am I missing something? — j08691, Mar 07 '13 at 17:44

score 4 · Accepted Answer · answered Mar 07 '13 at 17:22

4

$('li').each(function () {
    $(this).html($(this).html().replace(/Lorem/ig, "<mark>$&</mark>"));
    if ($(this).text().toLowerCase().indexOf('lorem') >= 0) $(this).addClass('look-at-me');
});

jsFiddle example

answered Mar 07 '13 at 17:22

j08691

204,283
31
260
272

Why not `$('li').each(...).has('mark').addClass('look-at-me')`? – Jared Farrish Mar 07 '13 at 17:26
@JaredFarrish - more than one way to skin a cat I suppose. – j08691 Mar 07 '13 at 17:28
It seemed so obvious to me, I figured I was missing something. – Jared Farrish Mar 07 '13 at 17:28
1

Small detail: I'd use `/\bLorem\b/ig` to match at word boundary, to make sure it wouldn't match `Lorems` for instance (unless that is what OP wants of course). Other than that: +1 – Decent Dabbler Mar 07 '13 at 17:36
I'm liking this a lot. But while it works on jsFiddle, it's not working on my actual site implementation. Let me double-check some things then I'll mark this as answered. – Daniel Fowler Mar 07 '13 at 17:45
@danfo - http://jsfiddle.net/GB8zP/1/ Also, don't forget if you're going to run it multiple times, you'll want to strip the `$('.look-at-me').removeClass('look-at-me');` before running the replace. – Jared Farrish Mar 07 '13 at 17:57
Nice! It definitely works. We're just using a different CSS file than what I thought. Thanks! – Daniel Fowler Mar 07 '13 at 18:37
@JaredFarrish Thanks - I'm actually using it as a troubleshooting strategy (make placeholder text pink so we spot it quickly) so I shouldn't need removeClass() because, well... the goal is to addClass() zero times. – Daniel Fowler Mar 14 '13 at 16:33

Nauphal · Answer 2 · 2013-03-08T04:39:54.273

2

try this

 $("ul li:contains('Lorem')").each(function() {
   $(this).html($(this).html().replace("Lorem","<mark>Lorem</mark>"));
   $(this).parent().addClass("look-at-me");
 })

edited Mar 08 '13 at 04:39

answered Mar 07 '13 at 17:15

Nauphal

6,194
4
27
43

1

I would probably use regex on the `.replace()` so that you can keep whatever case it's in (i.e. `LOREM` doesn't become `Lorem`). Otherwise, good answer. – Cat Mar 07 '13 at 17:18
1

this will cause the `` tags to become literal text, not interpreted as html. OP's problem is trickier than one might think at first glance. – Decent Dabbler Mar 07 '13 at 17:20
1

Excellent suggestion, but it's putting the element in the text instead of in the HTML. – Daniel Fowler Mar 07 '13 at 17:22
Doesn't work for lowercase "lorem". Failed for me in a test as it also applies the "look-at-me" class to every li regardless if it contains a "lorem". – j08691 Mar 07 '13 at 17:24
I tried running `$("*:contains('%search string%')").. and it returned every single node in the DOM.. (i tried googling that selector but couldn't find anything about it).. can you please show us a jsfiddle or some reference to this interesting selector? – abbood Mar 07 '13 at 17:24
@abbood it will return every single node as you said. Here the questioner has to find all the instances of word ``Lorem``, and I understand not just in ``li`` – Nauphal Mar 07 '13 at 17:28
well in that case `*:contains('lorem') ` does nothing? ie i could replace *lorem* with *foobar* and it will still return every single node? – abbood Mar 07 '13 at 17:31
2

You should try to avoid a costly selector like `*` in jQuery. – Robin van Baalen Mar 07 '13 at 18:02

c24w · Answer 3 · 2013-03-08T09:45:26.790

Here's what I came up with: http://jsfiddle.net/c24w/cZegf/

HTML

<ul id="test">
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam lorem tincidunt mauris eu Lorem risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>

JS

$('li', '#test').each(function highlightElement(i, e) {
    e = $(e);
    e.html(e.html().replace(/lorem/gi, function handleMatch(match) {
        if (!e.hasClass('look-at-me')) e.addClass('look-at-me');
        return '<match>' + match + '</match>';
    }));
});

CSS

.look-at-me {
    background: #f00;
}
match {
    background: #ff0;
}

Info

Regular expression:

/lorem/gi
       ↑↑
       ||_ case-insensitive
       |_ matches multiple (global)

Match function:

handleMatch(match) - each successful regular expression match is passed to this function, where the matched text is surrounded with <match></match>. This implementation makes it easier to change the exact pattern you want to highlight, because only the regular expression requires updating. Also, the parent element of the match is highlighted accordingly, if required.

Your code highlights every li, not only the ones containing lorem. It also fails on lowercase lorem. — j08691, Mar 07 '13 at 17:26
+1 for using a scoped jQuery selector (and providing a well documented answer). — Robin van Baalen, Mar 07 '13 at 18:05

Highlight a word's parent using jQuery?

3 Answers3