Uso de Web Workers para highlight de palavras

Por uma necessidade no trabalho (como na imensa maioria das vezes), comecei a pesquisar o uso de Web Workers. A necessidade? Criar um highlight de palavras em textos no html, via javascript.

Fiz um teste sem o uso de web workers, onde pegava o texto de uma div e iterando em uma lista de palavras-chaves, usando RegExp trocava a palavra-chave por . A performance foi lastimável, com 60 palavras-chaves em um texto longo (5 parágrafos gerados pelo CupCake Lipsum) a média era de 600 milisegundos.

Alterei para usar Web Workers, e criei um task.js

onmessage = function(e) {
    var html = e.data[0];
    for(var i=0; i
        var reg = new RegExp(e.data[1][i], 'gi');
        html = html.replace(reg, "" + e.data[1][i] + "");
    }
    postMessage(html);
}

O funcionamento é simples: onmessage recebe e (é um event), que possui e.data
Esse é um array (na chamada da função onmessage ficará mais claro) que possui na primeira posição o texto a ser analisado e na segunda, a lista de palavras-chaves.
A partir daí, só é necessário iterar na lista de palavras-chaves e com RegExp, trocar as ocorrências da mesma por um span com a palavra-chave no meio. No caso, coloquei uma class para poder estilizar.

O html é simples. Declaro a lista de palavras-chaves (chamei de wikis), instancio um novo Worker (que está no task.js). Com worker.postMessage(data), posso passar dados para o worker. Ali, está o array ao qual me referi.
O callback do onmessage recebe event, que também possui um data. No caso, é o texto com os spans inseridos "em volta" das palavras-chaves.

javascript

window.onload = function() {
    var div = document.getElementById("text");
    var wikis = [
        "brownie",
        "lemon",
        "chocolate",
        "sesame",
        "lollipop",
        "oat",
        "cake",
        "gingerbread",
        "sweet",
        "applicake",
        "apple",
        "chups"
    ];

    var worker = new Worker('task.js');
    
    worker.onmessage = function (event) {
        var d = event.data;
        div.innerHTML = d;
    }
    worker.postMessage([div.innerHTML, wikis]);

}

CSS

span.wiki {
   border-bottom:1px dotted #FF0000;
}

No html, crie uma div de id="text" com o texto que será verificado.

Para testar, crie o task.js com o primeiro trecho e um .html com o javascript  e css no head e a marcação html adequada.
Demo: http://www.chrisb.com.br/labs/webworker/words.html

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *