2

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>

0

1 respuesta 1

4

Modifiqué un poco tu código con la intención de simplificarlo.

El texto se va marcando en amarillo según la cantidad de caracteres ingresados, y cambia a verde si coincide perfectamente. Para cambiar los colores de resaltado, utilizo el estilo background-color.

var normal,
    destacado,
    texto,
    entrada;

function inicializar() {
    normal = document.getElementById("normal");
    destacado = document.getElementById("destacado");
    texto = normal.innerText;
    entrada = document.getElementById("entrada");
    entrada.addEventListener('input', actualizar);
}

function actualizar() {
    var porDestacar = entrada.value,
        pos = porDestacar.length;

    //Asignar la cantidad de caracteres ingresados desde el texto original
    destacado.innerText = texto.substr( 0, pos);
    //Asignar el resto
    normal.innerText = texto.substr( pos );

    //Coincide perfectamente?
    if (porDestacar === texto) {
        destacado.classList.add("completo");
    } else {
        destacado.classList.remove("completo");
    }
}

window.onload = inicializar();
#normal {
    background-color: transparent;
}

#destacado {
    background-color: yellow;
}

#destacado.completo {
    background-color: lightgreen;
}
<div>
    <p>
        <mark id="destacado"></mark><mark id="normal">Prueba de tipeo</mark>
    </p>
</div>
<input id="entrada" type="text">

  • Las etiquetas <div> y <p> sólo están para respetar tu código original.

  • Estoy utilizando dos etiquetas <mark>, una para el texto destacado, otra para el texto normal, y utilizando colores diferentes, definidos en el CSS.

  • Según la cantidad de caracteres, se asignan valores a estas etiquetas usando String.substr().

  • Cuando el texto original coincide exactamente con el ingresado, al mark destacado se le agrega la clase completo (o se le saca si no coincide).

6
  • 1
    Debe haber algún error en el código porque yo lo he probado y parece que se queda un caracter por detrás y nunca cambia a verde. Ahora mismo lo he probado en Internet Explorer, no se si sea por eso.
    – Awes0meM4n
    Commented el 21 dic. 2016 a las 7:45
  • 1
    @Awes0meM4n gracias. Ya está solucionado. Era cuestión de no dejar espacios al inicio de la etiqueta <mark> en el HTML original.
    – Mariano
    Commented el 21 dic. 2016 a las 9:16
  • 2
    Ahora funciona perfecto @Mariano , te felicito por la solución, está muy bien.
    – Awes0meM4n
    Commented el 21 dic. 2016 a las 10:12
  • @Mariano si funciona perfectamente!!!
    – hubman
    Commented el 21 dic. 2016 a las 13:05
  • @Mariano se trunca despues de esto texto = normal.innerText; estoy trabajando con jade p mark(id='destacado') mark(id='normal') Prueba de tipeo
    – hubman
    Commented el 23 dic. 2016 a las 15:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.