Ciao a tutti!!!
Ho una domanda. Ho uno script che mi permette di cercare ed evidenziare una parola all'interno di una pagina web. Ad esempio se cerco "Development", mi evidenzia tutte le occorrenze di "development" in questa pagina.
Vorrei creare 2 cose:
1. sottolineare un'occorrenza alla volta
2. spostarmi da un'occorrenza all'altra tramite tastiera.
Come si fa?
Vi lascio il mio codice:
Ho una domanda. Ho uno script che mi permette di cercare ed evidenziare una parola all'interno di una pagina web. Ad esempio se cerco "Development", mi evidenzia tutte le occorrenze di "development" in questa pagina.
Vorrei creare 2 cose:
1. sottolineare un'occorrenza alla volta
2. spostarmi da un'occorrenza all'altra tramite tastiera.
Come si fa?
Vi lascio il mio codice:
Codice:
function eventoonloadbody () {
var body=document.getElementsByTagName('body')[0];
var buttons = '<button onclick="Search();">Search</button>';
body.innerHTML=buttons+body.innerHTML;
}
function Search(){
var body=document.getElementsByTagName('body')[0];
search_item (body);
}
function search_item (node) {
var cible="development";
if (node.nodeType == 3) {
var parent_node =node.parentNode;
var content_node = node.nodeValue;
var pos_node = content_node.indexOf(cible);
while (pos_node >=0) {
var left= content_node.substr(0,pos_node);
var right= content_node.substr(pos_node+cible.length);
var span= document.createElement('span');
var start= document.createTextNode(left);
var word=document.createTextNode(cible);
span.appendChild(word);
parent_node.insertBefore(start,node);
parent_node.insertBefore(span,node);
content_node= right;
pos_node = content_node.indexOf(cible);
span.style.backgroundColor='#CDDE47';
span.style.color='#E8582E';
}
var end = document.createTextNode(content_node);
parent_node.insertBefore(end,node);
node.remove();
} else {
var children = node.childNodes;
var child = new Array();
for (var i = 0; i<children.length; i++) {
child[i] = children[i];
}
for (var i = 0; i < child.length; i++) {
search_item(child[i]);
}
}
}