I basically need to highlight a particular word in a block of text. For example, pretend I wanted to highlight the word "dolor" in this text:
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<p>
Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero.
Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>
How do I convert the above to something like this:
<p>
Lorem ipsum <span class="myClass">dolor</span> sit amet, consectetuer adipiscing elit.
</p>
<p>
Quisque bibendum sem ut lacus. Integer <span class="myClass">dolor</span> ullamcorper
libero. Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>
Is this possible with jQuery?
Edit : As Sebastian pointed out , this is quite possible without jQuery - but I was hoping there might be a special method of jQuery which would let you do selectors on the text itself. I'm already using jQuery heavily on this site, so keeping everything wrapped up in jQuery would make things perhaps a bit more tidy.
Source: Tips4all, CCNA FINAL EXAM
Maybe you can use highlight: JavaScript text higlighting jQuery plugin
ReplyDeletefunction hiliter(word, element) {
ReplyDeletevar rgxp = new RegExp(word, 'g');
var repl = '<span class="myClass">' + word + '</span>';
element.innerHTML = element.innerHTML.replace(rgxp, repl);
}
hiliter('dolor');
Hey, I wrote a plugin that does exactly this -- it's like the Johann Burkard plugin mlarsen posted, but works with regular expressions instead of strings. Check it out on github and please let me know if there are additional features you need.
ReplyDeleteHere's a variation that ignores and preserves case:
ReplyDeletejQuery.fn.highlight = function (str, className) {
var regex = new RegExp(str, "gi");
return this.each(function () {
this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
});
};
You need to get the content of the p tag and replace all the dolors in it with the highlighted version.
ReplyDeleteYou don't even need to have jQuery for this. :-)
This may also be of interest:
ReplyDeletehttp://www.jquery.info/The-plugin-SearchHighlight
If you're really game you could look through the source of StackOverflow for how it does syntax highlighting on the code blocks ;)
ReplyDeleteEssentially you'll have to just dynamically insert HTML (spans would be best) where you need them.
Is it possible to get this above example:
ReplyDeletejQuery.fn.highlight = function (str, className)
{
var regex = new RegExp(str, "g");
return this.each(function ()
{
this.innerHTML = this.innerHTML.replace(
regex,
"<span class=\"" + className + "\">" + str + "</span>"
);
});
};
not to replace text inside html-tags like , this otherwise breakes the page.
Instead of Js, you can simply use css to achieve this...
ReplyDeleteAnswer to a smilar question
If you put your text in, for example a div with an id.
ReplyDeleteyou can use
jQuery.fn.highlight = function (className)
{
return this.addClass(className);
};
$(document).ready(function() {
$("#test").highlight("highlight-class");
})
in your veiw you do
<div id="test">text to be higlighted</div>
in css
.highlight-class{
background-color: yellow;
}