Ako highlight-ovať slová na stránke

Nedávno som potreboval pomocou javascript-u na stránke zvýrazniť konkrétne slovo. Vychádzajúc z príspevku na stackoverflow sa mi podarilo danú funkčnosť implementovať ako extension metódu pre dojo/NodeList a mať tak túto funkčnosť prístupnú prostredníctvom modulu dojo/query.

define([
    
"dojo/_base/lang",
    
"dojo/query",
    
"dojo/dom-construct"
], function (lang, query,domConstruct) {
    
var NodeList query.NodeList;

    
lang.extend(NodeList, {
        
// Rozsirenia pre NodeList
    
});

    return 
NodeList;
});
Základná štruktúra extension modulu "NodeList-highlight"

Najskôr je potrebné implementovať metódu, ktorá pre daný DOM element vyberie všetky TextNode-y. Na moje prekvapenie dojo modul dojo/query nemá selector pre TextNode.

textNodes: function () {
    
var result [];

    this
.forEach(function (root) {
        
var walk = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null
            
false);

        var 
node;
        while 
(node walk.nextNode()) {
            result.push(node)
;
        
}
    })
;

    return 
query.NodeList(result);
}
Metóda pre výber TextNode-ov

No a nakoniec samotná metóda pre zvýraznenie textu, ktorá pre vstupný element nájde všetky TextNode-y a do tých elementov, ktoré obsahujú zadané slovo, doplní nový element pre zvýraznenie.

highlight: function (word, template, formatter) {
    
// Ak nemame slovo nerobime nic
    
if (!word) {
        
return this;
    
}

    
// Osetrime vstupny template
    
template template || "<span class='highlighted'></span>";
    
    
// Metoda, ktora moze dodatocne upravit text v text node
    // napr. odstranenie diakritiky, atd.
    
formatter (typeof (formatter) === "function"
        ? formatter : 
function(val) {
            
return val;
        
};

    
// Vysledny zoznam bude obsahovat highlight elementy
    
var result [];

    
// Prejdeme vsetky text nody
    
this.textNodes().forEach(function(node) {
        
var 0;
        while 
((i formatter(node.nodeValue).indexOf(word, i)) > -1) {
            
// Splitneme text node na konci slova a na zaciatku
            
var afterNode node.splitText(i + word.length);
            var 
wordNode node.splitText(i);

            
// Vytvorime highlight element
            
var highlightNode domConstruct.toDom(template);

            
// Vlozime ho do DOM-u pre text node, ktory obsahuje hladane slovo
            
domConstruct.place(highlightNode, wordNode, "before");

            
// Text node s hladanym slovom vlozime do highlit elementu
            
domConstruct.place(wordNode, highlightNode);

            
result.push(highlightNode);

            
// Pokracujeme dalej
            
node afterNode;
        
}
    })
;

    return 
query.NodeList(result);
}
Metóda pre zvýraznenie textu

Ak chceme potom povedzme na celej stránke zvýrazniť slovo "Testík", urobíme to nasledovne:

require([
    
"dojo/query",
    
"NodeList-highlight"
], function (query) {
    
// Metoda vrati vstupny text bez diakritiky
    
function removeDiacritics (text) {
        
// ...
    
}

    
// Slovo ktore chceme zvyraznit 'testik'
    
var word removeDiacritics("Testík").toLowerCase();

    
// Zvyraznime slovo v celom dokumente
    
query(document.body).highlight(word, nullfunction(val) {
        
return removeDiacritics(val).toLowerCase();
    
});    
});
Zvýraznenie textu na stránke
Publikované Saturday, November 08, 2014 2:48 PM xxxmatko
Zaradené do: , ,

Komentáre

Bez komentárov