Highlight words in text

Question

I'm trying to select a single word, then apply something to it. Example as below.

<p>Some text here</p>

Is there a way to select the word text, then apply something to it? For example .css() - I know you can select the whole text, then select word number 2, but that's not what I'm trying to do. The word could be many places.

Can't you use either the classname or id with p tag? that will solve your problem. — jsp, Oct 27 '13 at 18:44
Not an answer, so I'll comment: Tim Down's [`Rangy`](http://code.google.com/p/rangy/) is useful for this sort of thing. — T.J. Crowder, Oct 27 '13 at 18:44
@T.J.Crowder how would that work? Could you show me an example as an answer? — Lemvig Kiggeren, Oct 27 '13 at 19:00

Roko C. Buljan · Accepted Answer · 2021-09-09T21:45:16.410

Find the target Element and its children, filter their contents and search for a textual nodeType:

var word = 'text';

var rgx = new RegExp('\\b('+word+')\\b', 'ig');

$('p, p *').contents().filter(function() {
  return this.nodeType === 3;
}).each(function() {
  $(this).replaceWith($(this).text().replace(rgx, '<span class="highlight">$1</span>'));
});

.highlight {
  background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Some text and a link <a href="text.html">text.html</a> here and <b>some bold text there</b>. Text Is Uppercase.<br>Text... text.<br>  Textual.</p>

I believe the above should be quite promising since it'll not crash the HTML since it doesn't matches attributes strings.

score -1 · Answer 2 · answered Oct 27 '13 at 18:43

-1

You can't select a word, as it is not an element.

To make it possible, you will have to wrap your words in spans.

answered Oct 27 '13 at 18:43

MightyPork

18,270
10
79
133

It depends on what you mean by "select." You can certainly get a `Range` for it. – T.J. Crowder Oct 27 '13 at 18:44
@T.J.Crowder perhaps, but if you want to style it, the wrapping is unavoidable. – MightyPork Oct 27 '13 at 18:47
1

@ MightyPork: Sure, but once you have a range, you can do that dynamically. – T.J. Crowder Oct 27 '13 at 18:50

score -1 · Answer 3 · answered Sep 09 '21 at 21:58

-1

As per my understanding; you want to play with a single word in in a sentence.

<p>This a <span style="color:blue">sample</span> paragraph.</p>

answered Sep 09 '21 at 21:58

Faisal Sheikh

1
3

Highlight words in text

3 Answers3

Linked