JavaScript - Escribir apartir de un determinado caracter en un textarea

 
Vista:
Imágen de perfil de ale
Val: 1
Ha aumentado su posición en 23 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Escribir apartir de un determinado caracter en un textarea

Publicado por ale (1 intervención) el 18/11/2019 22:04:23
Hola estoy haciendo un editor de codigo online y necesito que determinadas palabras cambien su color por lo que use un div y lo hice editable, despues hice una funcion que agrega etiquetas span con el estilo que deseo, y lo finalizo usando un innerHTML mi problema es que en cuanto el innerHTML se ejecuta el puntero para escribir vuelve al inicio haciendo imposible escribir en donde te quedaste
Es posible hacer que no cambie el puntero o en su defecto devolverlo a la posicion donde estuvo antes de la ejecucion el innerHTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function lala(){
    contenido = document.getElementById('area').textContent;
    busqueda(contenido);
}
function busqueda(cadena){
 
    for(let i = 0;i<reservadas.length;i++){
        if(cadena.indexOf(reservadas[i])!=-1){
            var str = document.getElementById("area").innerHTML;
            var res = str.replace(/break|case|class|catch|const|continue|debugger|default|delete|do|else|export|extends|finally|for|function|if|import|in|instanceof|let|new|return|super|switch|this|throw|try|typeof|var|void|while|with|yield/gi, function (x) {
            return "<span style='color:blue;'>"+x+"</span>";
            });
            document.getElementById("area").value = res;
        }
    }
    console.log(document.getElementById("area"));
}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script defer src="{% static 'js/index.js' %}"></script>
    <title>Document</title>
</head>
<body>
    <div id="area" style="border: solid 1px;width: 80%; height: 100px;" onkeypress="lala();" contenteditable="true">
 
    </div>
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder