Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

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

Back to method list

Method namenew highlighter()
DescriptionCreate Highlighter instance

Add words or word combinations

Back to method list

Method nameadd(words, config)
DescriptionAdd 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

Back to method list

Method namehighlight()
DescriptionPerform highlighting action using provided words and settings

Latest changes

None for now


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus