I have the following script to highlight words. I have been trying to change this script so it will highlight returning words in a text automatically. (i.e. when clicking the first "he" in the following sentence he will automatically highlight the other "he" --> He watched and he listened.)
I also want the script to count the highlighted words and divide it by the total amount of words in the text.
Is there anyone who can help me with this?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.zxc {
color:black;
}
.highlight {
background-Color:red;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
function zxcWords(n){
var nu=n.childNodes.length;
for(var z0=0;z0<nu;z0++) {
var txt=n.firstChild.data;
var rn=n.removeChild(n.firstChild);
if(rn.nodeType==3){
var s=txt.split(' ');
for(var z1=0;z1<s.length;z1++) {
var nn=document.createTextNode(s[z1]+' ');
nn=document.createElement('A');
nn.className='zxc';
nn.appendChild(document.createTextNode(s[z1]));
n.appendChild(nn);
n.appendChild(document.createTextNode(' '));
}
}
else {
zxcWords(rn);
n.appendChild(rn);
}
}
}
function zxcCheckWords(o){
var obj=document.getElementById(o.ID);
zxcWords(obj);
this.words=this.bycls('zxc',obj);
for (var z0=0;z0<this.words.length;z0++){
this.addevt(this.words[z0],'mouseup','highlight',this.words[z0])
}
this.clss=['zxc','zxc '+o.HighLight];
this.wordary=o.Words;
for (var z1=0;z1<this.wordary.length;z1++){
this.wordary[z1]=this.wordary[z1].toUpperCase();
}
}
zxcCheckWords.prototype={
CheckWords:function(id){
for (var ary=[],word,z0=0;z0<this.words.length;z0++){
if (this.words[z0].className==this.clss[1]){
word=this.words[z0].innerHTML.replace(/\W/g,'');
for (var ck=false,z0a=0;z0a<this.wordary.length;z0a++){
if (this.wordary[z0a]==word.toUpperCase()){
ck=true;
break;
}
}
if (!ck){
ary.push(word);
}
}
}
document.getElementById(id).innerHTML=ary.join('<br>');
},
highlight:function(word){
word.className=this.clss[word.className==this.clss[0]?1:0];
},
bycls:function(nme,el){
for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
}
}
/*]]>*/
</script></head>
<body>
<div id="tst" >
When the man arrived at his office, he found out that he had forgotten his hat at the bus. He left the office and went to the central bus station. When he arrived there he remembered he left the house without his hat.
</div>
<script type="text/javascript">
/*<![CDATA[*/
var W1=new zxcCheckWords({
ID:'tst',
HighLight:'highlight',
});
/*]]>*/
</script>
</body>
</html>
Bookmarks