Tengo el siguiente código, el cual marca el texto original cuando el usuario intenta teclear una copia según la cantidad de caracteres ingresados, pero quisiera que cambie de color desde una determinada posición, y al final con otro color.
var texto;
var div;
var pos=0;
function inicializar() {
div = document.getElementById("texto");
texto = div.getElementsByTagName('p')[0].innerHTML;
document.getElementById("entrada").addEventListener('input', actualizar);
}
function actualizar() {
var porDestacar = document.getElementById("entrada").value;
document.getElementById("texto").innerHTML = destacar(porDestacar);
}
function destacar(porDestacar) {
var textoDestacado = "<p>";
pos++;
if (porDestacar.length == 0) {
textoDestacado += texto;
return textoDestacado + "</p>"
}
var sigPosicion = 0,
posicion;
textoDestacado += "<mark>" + texto.substring(0, porDestacar.length) + "</mark>";
sigPosicion = porDestacar.length;
if (sigPosicion < texto.length) {
textoDestacado += texto.substring(sigPosicion, texto.length - 1);
}
return textoDestacado + "</p>";
}
window.onload = inicializar;
<body>
<div id="texto">
<p>HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.</p>
</div>
<input id="entrada" type="text"/>
</body>