Highlight words in website using javascript
Highlighter class can be used emphasize, highlight specific words or word combinations in website.
It is possible to provide HTML element in which to wrap found words or word combinations. It is also possible to provide attributes and css styles for these attributes as well as three callback functions for click, mouseover and mouseout events.
Package contains highlighter.js and highlighter.packed.js (packed javascript) and one example file: example.html (showing example of how to use this object).
Contents
Download
Example codes
<html> <head> </head> <body> <div> Some text and notext <p>Text in paragraph</p> </div> </table> <script type="text/javascript" src="./highlighter.packed.js" ></script> <script type="text/javascript"> var hl = new highlighter(); hl.add("text", { //html element in which to wrap text html: "a", //element attributes attributes:{ href: "#click", rel: "click" }, //elements css styles css:{ color: "green", fontWeight: "bold" }, //some event callback functions with event objects events:{ onclick: function(){ alert("You clicked me"); }, onmouseover: function(e){ e = (!e) ? window.event : e; e.target.style.color = "red"; }, onmouseout: function(e){ e = (!e) ? window.event : e; e.target.style.color = "green"; } }, //case insensitive search ci : true }); hl.highlight(); </script> </body> </html>
Examples in action
Example scripts provided with package in action:
Method list
Constructor
| Method name | new highlighter() |
| Description | Create Highlighter instance |
Add words or word combinations
| Method name | add(words, config) |
| Description | Add word or multiple words for highlighting using provided settings |
| Input parameters | string or array words - One word as string or multiple words as array json config - configuration of how to highlight found words |
| Example input |
add(["word", "keyword"], {
//html element in which to wrap text
html: "a",
//element attributes
attributes:{
href: "#click",
rel: "click"
},
//elements css styles
css:{
color: "green",
fontWeight: "bold"
},
//some event callback functions with event objects
events:{
onclick: function(){
alert("You clicked me");
},
onmouseover: function(e){
e = (!e) ? window.event : e;
e.target.style.color = "red";
},
onmouseout: function(e){
e = (!e) ? window.event : e;
e.target.style.color = "green";
}
},
//case insensitive search
ci : true
});
|
Highlight provided words
| Method name | highlight() |
| Description | Perform highlighting action using provided words and settings |
Latest changes
None for now
You may also be interested in:
Powered by BlogAlike.com
