Como puedo indentar htm, css, js con javascript

Kain dijo:

¿Quieres identar el javascript y el css usando un codigo propio en js? solo por curiosidad ¿Cual es el motivo? Lo normal es que el propio IDE ya te vaya identando lo que necesites

Hacer clic para expandir...

Kain dijo:

Pues no puedo ayudarte, losiento. La verdad que nunca he tenido la necesidad de hacer algo así.
Suerte!

Hacer clic para expandir...

<div contenteditable="true" onkeyup="addIndent(event)">
  <!-- contenido editable aquí -->
</div>

<script>
function addIndent(event) {
  if (event.keyCode === 13) { // si la tecla presionada es enter
    document.execCommand('indent', false, null); // indentar el texto
    document.execCommand('insertText', false, ' '); // insertar un espacio en blanco
  }
}
</script>

m16u31 dijo:

tienes que identificar los saltos de líneas y los espacios en blanco, todo por expresiones regulares.

Pero lo complicado supongo o no tanto, la jerarquia de la estructura del código. si hay 1 "if" identarx1 si hay 1 if dentro de otro if identarx2, cosas por estilo.

O podrías usar alguna librería o paquete de los muchos que ya hacen eso.

Hacer clic para expandir...

m16u31 dijo:

antes de nada estas trabajando con algún estándar? por que de acuerdo al estándar, son X espacios en blanco para identar o 1 tab.

caso de HTML, siempre habrá un jerarquía div tiene mas jerarquía de ul > li > a >span etc me entiendes, Vas a tener que recorrer todo el archivo y mover como sea necesario

CSS, mas fácil, solo busca "{" e ingresa un salto de linea, luego busca ";" otro salto de linea.... m,e entiendes...
creo que en el caso de CSS q es mas fácil toma todo el input área, quita los espacios en blanco todos que te quede el texto minificado luego buscas la "{", ":", ";", "}". con un split luego insertas los espacios con replace

esto es básico tienes q mejorarlo pero. textoAFormatear.replace("{","{\n\r ") e igual con los demás, creo que no es optimo seria mejor con expresiones regulares pero para salir del apuro iría bien

Hacer clic para expandir...

m16u31 dijo:

algo asi es super basico pero para darte la idea, respecto al "pierdo la posición del cursor." pues tendras que almacenarla en una variable entonces

How to set the caret (cursor) position in a contenteditable element (div)?

I have this simple HTML as an example: <div id="editable" contenteditable="true"> text text text<br> text text text<br> text text text<br> </div...

stackoverflow.com

Hacer clic para expandir...

m16u31 dijo:

mira la parte de "addEventListener keypress", mira en la consola de desarrollador los valores de esas variables, tienes la posición, el contenido todo para que lo termines.

podrías verificar la posición, ya depende como lo hagas hay varias maneras. Podrías jugar con ":" si haces enter en una posición y antes de esa posición hay un ";" que inserte un "\t" o jugar con los "{}", termínalo tu si yo te ayudo en todo no vas a aprender.

Hacer clic para expandir...