Como puedo indentar htm, css, js con javascript

[Mr_J21]

 

[Kain]

¿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

 

[Mr_J21]

¿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

¿Quieres identar el JavaScript y el css usando un código propio en js? Si
¿Cuál es el motivo? Estoy creando una plataforma similar a codepen.
Lo normal es que el propio IDE ya te vaya identando lo que necesites? Exacto, que indente el código dentro: "textarea" "contenteditable="true""

 

[Kain]

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

 

[Mr_J21]

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

Este código hace algo similar a lo que quiero hacer.

<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]

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.

 

[Mr_J21]

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.

Entiendo tu punto, no quiero una estructura, quiero algo simple como crear un espacio entre las dos llaves "{}" en cada nueva línea.
( y algo similar al para el HTML JS.) Te mostrare una imagen de mi proyecto así puedes tener un idea

 

[m16u31]

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

 

[Mr_J21]

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

Es más difícil de lo que piensas por ejemplo: cuando actualizo la caja "<div contenteditable="true"></div>" pierdo la posición del cursor.
Puedo hacerme la indentacion del CSS con esta caja "<div contenteditable="true"></div> haber si salgo de este bucle en el que me encuentro.
Como ultima alternativa recomiéndame una librería que sea liviana.

Para mí esto es muy difícil de hacer.

 

[m16u31]

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

 

[moiseseccam]

Creo que esto lo explica mejor

The Hardest Program I’ve Ever Written – journal.stuffwithstuff.com

Aunque fue hecho para DART

 

[Mr_J21]

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

Ya que estás en el punto donde estoy:
Cada vez que haga Enter y cree una nueva línea, debe crear un espacio de dos Tab 2.
El cursor debe mantener la posición mientras escribo de forma similar a cualquier otro editor de código.
Es lo que quiero ver como puedes hacerlo.

Siempre el cursor quede en esta posición mientras valla escribiendo.

 

[m16u31]

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.

 

[Mr_J21]

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.

Gracias amigo un millón de gracias por la ayuda siempre.