Why using a selfmade highlighting function is a bad idea

The reason why it's probably a bad idea to start building your own highlighting function from scratch is because you will certainly run into issues that others have already solved. Challenges:

• You would need to remove text nodes with HTML elements to highlight your matches without destroying DOM events and triggering DOM regeneration over and over again (which would be the case with e.g. innerHTML)
• If you want to remove highlighted elements you would have to remove HTML elements with their content and also have to combine the splitted text-nodes for further searches. This is necessary because every highlighter plugin searches inside text nodes for matches and if your keywords will be splitted into several text nodes they will not being found.
• You would also need to build tests to make sure your plugin works in situations which you have not thought about. And I'm talking about cross-browser tests!

Sounds complicated? If you want some features like ignoring some elements from highlighting, diacritics mapping, synonyms mapping, search inside iframes, separated word search, etc. this becomes more and more complicated.

Use an existing plugin

When using an existing, well implemented plugin, you don't have to worry about above named things. The article 10 jQuery text highlighter plugins on Sitepoint compares popular highlighter plugins.

Have a look at mark.js

mark.js is such a plugin that is written in pure JavaScript, but is also available as jQuery plugin. It was developed to offer more opportunities than the other plugins with options to:

• search for keywords separately instead of the complete term
• map diacritics (For example if "justo" should also match "justò")
• ignore matches inside custom elements
• use custom highlighting element
• use custom highlighting class
• map custom synonyms
• search also inside iframes
• receive not found terms

DEMO

Alternatively you can see this fiddle.

Usage example:

// Highlight "keyword" in the specified context $(".context").mark("keyword"); // Highlight the custom regular expression in the specified context $(".context").markRegExp(/Lorem/gmi); 

It's free and developed open-source on GitHub (project reference).

Why using a selfmade highlighting function is a bad idea

The reason why it's probably a bad idea to start building your own highlighting function from scratch is because you will certainly run into issues that others have already solved. Challenges:

• You would need to remove text nodes with HTML elements to highlight your matches without destroying DOM events and triggering DOM regeneration over and over again (which would be the case with e.g. innerHTML)
• If you want to remove highlighted elements you would have to remove HTML elements with their content and also have to combine the splitted text-nodes for further searches. This is necessary because every highlighter plugin searches inside text nodes for matches and if your keywords will be splitted into several text nodes they will not being found.
• You would also need to build tests to make sure your plugin works in situations which you have not thought about. And I'm talking about cross-browser tests!

Sounds complicated? If you want some features like ignoring some elements from highlighting, diacritics mapping, synonyms mapping, search inside iframes, separated word search, etc. this becomes more and more complicated.

Use an existing plugin

When using an existing, well implemented plugin, you don't have to worry about above named things. The article 10 jQuery text highlighter plugins on Sitepoint compares popular highlighter plugins.

Have a look at mark.js

mark.js is such a plugin that is written in pure JavaScript, but is also available as jQuery plugin. It was developed to offer more opportunities than the other plugins with options to:

• search for keywords separately instead of the complete term
• map diacritics (For example if "justo" should also match "justò")
• ignore matches inside custom elements
• use custom highlighting element
• use custom highlighting class
• map custom synonyms
• search also inside iframes
• receive not found terms

DEMO

Alternatively you can see this fiddle.

Usage example:

// Highlight "keyword" in the specified context $(".context").mark("keyword"); // Highlight the custom regular expression in the specified context $(".context").markRegExp(/Lorem/gmi); 

It's free and developed open-source on GitHub (project reference).

Disclosure: I am the original author of this library.

Why using a selfmade highlighting function is a bad idea

The reason why it's a bad idea to start building your own highlighting function from scratch is because you need to remove text-nodes with HTML-elements to highlight your match. If you want to remove the highlighting you have to remove HTML-elements with text-nodes and also have to combine the splitted text-nodes for further searches. Because every highlighting plugin searches in text nodes for matches and if your keywords will be splitted into several text nodes it will not being found. You will also need to build tests to make sure your plugin will work in situations which you have not thought about. Sounds complicated? Well it is! And if you want some features like ignoring some elements from highlighting, diacritics mapping, synonyms mapping, custom highlighting element/classname, separated word search, etc. this will become more and more complicated.

Use an existing plugin like jquery.mark

When using an existing plugin you don't have to worry about above named things and to build your own tests. jquery.mark has implemented:

• Option to search for keywords separately instead of the complete term
• Option to map diacritics (For example if "justo" should also match "justò")
• Option to ignore specific elements for matches
• Option to use custom highlighting element
• Option to use custom highlighting class
• Option to use synonyms
• Option to search also inside iframes

DEMO JSFIDDLE

Usage example:

$(".context").mark("keyword"); 

If you don't need these improvements you can go ahead with simply held plugins.

Why using a selfmade highlighting function is a bad idea

The reason why it's probably a bad idea to start building your own highlighting function from scratch is because you will certainly run into issues that others have already solved. Challenges:

• You would need to remove text nodes with HTML elements to highlight your matches without destroying DOM events and triggering DOM regeneration over and over again (which would be the case with e.g. innerHTML)
• If you want to remove highlighted elements you would have to remove HTML elements with their content and also have to combine the splitted text-nodes for further searches. This is necessary because every highlighter plugin searches inside text nodes for matches and if your keywords will be splitted into several text nodes they will not being found.
• You would also need to build tests to make sure your plugin works in situations which you have not thought about. And I'm talking about cross-browser tests!

Sounds complicated? If you want some features like ignoring some elements from highlighting, diacritics mapping, synonyms mapping, search inside iframes, separated word search, etc. this becomes more and more complicated.

Use an existing plugin

When using an existing, well implemented plugin, you don't have to worry about above named things. The article 10 jQuery text highlighter plugins on Sitepoint compares popular highlighter plugins.

Have a look at mark.js

mark.js is such a plugin that is written in pure JavaScript, but is also available as jQuery plugin. It was developed to offer more opportunities than the other plugins with options to:

• search for keywords separately instead of the complete term
• map diacritics (For example if "justo" should also match "justò")
• ignore matches inside custom elements
• use custom highlighting element
• use custom highlighting class
• map custom synonyms
• search also inside iframes
• receive not found terms

DEMO

Alternatively you can see this fiddle.

Usage example:

// Highlight "keyword" in the specified context $(".context").mark("keyword"); // Highlight the custom regular expression in the specified context $(".context").markRegExp(/Lorem/gmi); 

It's free and developed open-source on GitHub (project reference).

Why using a selfmade highlighting function is a bad idea

The reason why it's a bad idea to start building your own highlighting function from scratch is because you need to remove text-nodes with HTML-elements to highlight your match. If you want to remove the highlighting you have to remove HTML-elements with text-nodes and also have to combine the splitted text-nodes for further searches. Because every highlighting plugin searches in text nodes for matches and if your keywords will be splitted into several text nodes it will not being found. Sounds complicated? Well it is! And if you have some features like diacritics mapping, custom highlighting element/classname, searching in a defined context or a separated search for your keywords this will become more and more complicated.

Recommendation

This is why I can only recommend you to use an existing plugin for this like jmHighlight. It has implemented:

• Option to search for keywords separately instead of the complete term
• Option to map diacritics (For example if "justo" should also match "justò")
• Option to ignore specific elements for matches
• Option to use custom highlighting element
• Option to use custom highlighting class (for example to highlight multiple search keywords in a different color)
• Option to use synonyms

If you don't need these improvements you can go ahead with simply held plugins.

Why using a selfmade highlighting function is a bad idea

The reason why it's a bad idea to start building your own highlighting function from scratch is because you need to remove text-nodes with HTML-elements to highlight your match. If you want to remove the highlighting you have to remove HTML-elements with text-nodes and also have to combine the splitted text-nodes for further searches. Because every highlighting plugin searches in text nodes for matches and if your keywords will be splitted into several text nodes it will not being found. You will also need to build tests to make sure your plugin will work in situations which you have not thought about. Sounds complicated? Well it is! And if you want some features like ignoring some elements from highlighting, diacritics mapping, synonyms mapping, custom highlighting element/classname, separated word search, etc. this will become more and more complicated.

Use an existing plugin like jquery.mark

When using an existing plugin you don't have to worry about above named things and to build your own tests. jquery.mark has implemented:

• Option to search for keywords separately instead of the complete term
• Option to map diacritics (For example if "justo" should also match "justò")
• Option to ignore specific elements for matches
• Option to use custom highlighting element
• Option to use custom highlighting class
• Option to use synonyms
• Option to search also inside iframes

DEMO JSFIDDLE

Usage example:

$(".context").mark("keyword"); 

If you don't need these improvements you can go ahead with simply held plugins.