Locate specific text within the content and apply an underline to it

Question

Is there a way to locate specific text on my website and apply an underline to it?

Suppose I have some text displayed and I wish to identify all instances of the word hello and underline them.

Here is my attempt at the code:

$( "body:contains('hello')" ).css( "text-decoration", "underline" );

However, this approach seems to be underlining the entire line instead of just the individual word.

Answer 1

Answer №1

Give this a try.

Markup

<p>For instance, there is some text on the website and you want to highlight all occurrences of the word hello.</p>

Javascript

$('p').html( $('p').html().replace(/hello/g, '<strong>hello</strong>') )

Answer 2

Give this a try.

Markup

<p>For instance, there is some text on the website and you want to highlight all occurrences of the word hello.</p>

Javascript

$('p').html( $('p').html().replace(/hello/g, '<strong>hello</strong>') )

Answer 3

Update the content of the body element by wrapping all instances of "hello" in strong tags

 $('body').html($('body').html().replace(/hello/g, '<strong>hello</strong>') )

Answer 4

Update the content of the body element by wrapping all instances of "hello" in strong tags

 $('body').html($('body').html().replace(/hello/g, '<strong>hello</strong>') )

Answer 5

$(document).ready(function() {
     $('*:contains("hello")').css( "text-decoration", "underline");
});

Kindly examine this code snippet

Answer 6

$(document).ready(function() {
     $('*:contains("hello")').css( "text-decoration", "underline");
});

Kindly examine this code snippet