Wrap a particular text string inside an HTML tag with a <span> using jQuery

Question

I am trying to wrap only a certain word (or even a part of a word) inside a given HTML tag's text content with a span, applying a class to it, using jQuery or plain javascript.

I only got as far as selecting the complete tags that contain the desired word/string, but I don't know how to select and wrap the word/s inside it. All the methods I found do search for a substring, but always select and wrap the whole tag or its complete contents (for example wrapInner()), which is not what I want.

$('h3:contains(icular)').wrap("<span class='highlight'></span>");

.highlight {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>This is the first of several h3 headings</h3>
<h3>This is another h3 heading, containing a particular word</h3>
<h3>This is another h3 heading</h3>
<h3>This is another h3 heading, again containing a particular word</h3>
<h3>This is the way it should look: part<span class="highlight">iculär</span> word</h3>
<p>This is a p tag, containing the same particular word/string. It should not be affected in this process.</p>

GrafiCode · Accepted Answer · 2022-11-22 14:12:59Z

3

You can use .each() to iterate all elements containing the word you are looking for, and then perform a .replaceAll() on each element's html:

const search = 'icular'

$('h3:contains(' + search + ')').each( function(index, element) {
  $(element).html( $(element).html().replaceAll(search, '<span class="highlight">' + search + '</span>') )
})

.highlight {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>This is the first of several h3 headings</h3>
<h3>This is another h3 heading, containing a particular word and another instance of the same "particular" word</h3>
<h3>This is another h3 heading</h3>
<h3>This is another h3 heading, again containing a particular word</h3>
<h3>This is the way it should look: part<span class="highlight">iculär</span> word</h3>

edited Nov 22, 2022 at 14:12

answered Nov 22, 2022 at 14:06

GrafiCode

3,3653 gold badges31 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Wrap a particular text string inside an HTML tag with a <span> using jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related