Heatmap en tiempo real con Javascript y Canvas

Os voy a pasar un pequeño script que nos dividiría un elemento de texto HTML (TEXT_NODE) en distintas partes. Quizás os pueda resultar un script extraño, pero se puede usar poner en negrita palabras o alguna otra cosa, yo en mi caso ya le he encontrado utilidad un par de veces y ahora estoy usándolo otra vez en algo que os contaré más adelante (espero que dentro de poco tiempo).

Imaginaros que tenemos un elemento HTML que es realmente un nodo de texto (pensad en DOM, no en innerHTML), por ejemplo:

var elem = document.createTextNode('Esto es una prueba');
document.body.appendChild(elem);

Ahora queremos cambiar “es una” por “es una“. Lo que tendríamos que hacer es dividir en texto en tres partes “Esto “, “es una”, ” prueba”, crearemos tres objetos de texto, cada una con cada trozo de texto y luego un elemento STRONG en el que incluiremos el texto del medio. Por último incluimos los elementos nuevos y eliminamos el anterior.

// Obtenemos primera parte de texto
var parte = elem.nodeValue.substring(0,
elem.nodeValue.indexOf("es una"));
// Creamos elemento de texto con contenido "Esto "
var obj = document.createTextNode(parte);
// Insertamos nuevo elemento
elem.parentNode.insertBefore(obj, elem);
// Obtenemos segunda parte de texto
parte = elem.nodeValue.substring(elem.nodeValue.indexOf("es una"), elem.nodeValue.indexOf("es una")+6);
// Creamos elemento de texto con contenido "es una"
obj = document.createTextNode(parte);
// Lo añadimos a un objeto STRONG
var negrita = document.createElement("STRONG");
negrita.appendChild(obj);
// Insertamos nuevo elemento
elem.parentNode.insertBefore(negrita, elem);
// Obtenemos tercera parte de texto
parte = elem.nodeValue.substring(elem.nodeValue.indexOf("es una")+6);
// Creamos elemento de texto con contenido "es una"
obj = document.createTextNode(parte);
// Insertamos nuevo elemento
elem.parentNode.insertBefore(obj, elem);
// Eliminamos elemento anterior
elem.parentNode.removeChild(elem);