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
Alterei para usar Web Workers, e criei um task.js
onmessage = function(e) {
var html = e.data[0];
for(var i=0; i
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