Skip to main content
Se mejora el contexto de esta publicación y se realizaron correcciones tipográficas.
Origen Enlace
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30

He probado las soluciones aportadas (además de útiles) y todas funcionan. Sin embargo, voy a aprovechar de poner mi grano de arena sobre este tema.

Por otra parte, se coloca la solución al principio para que pueda evaluar los resultadosevaluarlo. Luego de eso, lea la explicaciónse explicará más abajo cómo funciona. Le será de mucha ayuda.

PosibleUna solución de muchas otras posibles

Esta sería una posible solución, pruébelaPruébela y evalúe sus resultados:

console.clear();

const parrafos = document.querySelectorAll("p");

const evaluar = (parrafo) => {
  // Expresión para encontrar el primer guión:
  let expresion = /^(\–)/g;

  // Se obtiene el contenido del parrafo y se elimina el guión:
  let texto = parrafo.textContent.trim();
  parrafo.textContent = texto.replace(expresion, "");
  return expresion.test(texto);
}

parrafos.forEach(parrafo => {
  if (evaluar(parrafo)) {
    parrafo.classList.add("padding-left");
  }
});
.cuento p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}


/* Código CSS nuevo */

.padding-left {
  position: relative;
  padding-left: 30px;
}

.padding-left::before {
  content: "–";
  position: absolute;
  margin: auto;
  left: 0;
  padding-left: 15px;
}
<div class="cuento">
  <p>Érase una vez una preciosa niña que siempre llevaba una capa roja con capucha para protegerse del frío. Por eso, todo el mundo la llamaba Caperucita Roja.</p>
  <p>Caperucita vivía en una casita cerca del bosque. Un día, la mamá de Caperucita le dijo:</p>
  <p>– Hija mía, tu abuelita está enferma. He preparado una cestita con tortas y un tarrito de miel para que se la lleves ¡Ya verás qué contenta se pone!</p>

  <p> </p>
  <p>– ¡Estupendo, mamá! Yo también tengo muchas ganas de ir a visitarla – dijo Caperucita saltando de alegría.</p>
  <p>Cuando Caperucita se disponía a salir de casa, su mamá, con gesto un poco serio, le hizo una advertencia:</p>
  <p>– Ten mucho cuidado, cariño. No te entretengas con nada y no hables con extraños. Sabes que en el bosque vive el lobo y es muy peligroso. Si ves que aparece, sigue tu camino sin detenerte.</p>
  <p>– No te preocupes, mamita – dijo la niña- Tendré en cuenta todo lo que me dices.</p>
  <p>– Está bien – contestó la mamá, confiada – Dame un besito y no tardes en regresar.</p>
  <p>– Así lo haré, mamá – afirmó de nuevo Caperucita diciendo adiós con su manita mientras se alejaba.</p>
  <p>Cuando llegó al bosque, la pequeña comenzó a distraerse contemplando los pajaritos y recogiendo flores. No se dio cuenta de que alguien la observaba detrás de un viejo y frondoso árbol. De repente, oyó una voz dulce y zalamera.</p>
  <p>– ¿A dónde vas, Caperucita?</p>
</div>

La primera regla es para posicionar los párrafos (position: relative) que tienen los guiones y la segunda para colocarle el guión que se le quitó con JavaScript. Pero, en la primera regla se agrega el espacio a la izquierda mediante relleno (padding-left: 30px).

Se posiciona el párrafo para que los guiones que se encuentraencuentran en el pseudo-elemento ::before no se escapen de él.

En esta primera regla posicionamos el párrafo y le agregamos un espacio mediante relleno:

En esta segunda regla CSS utilizamos un pseudo-elemento para colocarle el guión () que previamente le habíamos quitado con JavaScript:

Obtenemos nuestra lista de nodos (en este caso, los párrafos):

En laCrearemos nuestra función evaluar( parrafo ) vamos apara evaluar el, cada párrafo que pase como parámetro y averiguar si éste empieza conconocer quién contiene un guión () al principio. De ser así, eliminar

const evaluar = (parrafo) => {
    ...
}

Al párrafo que contenga el guión () al principio se le eliminará de su contenido y colocarle una clasese le asignará en su lugar una clase (padding-left).

Funcionamiento interno de la función evaluar( parrafo )

Por ejemplo, dentro de laNuestra función consta de cuatro evaluar() tenemos(04) líneas que se explican a continuación:

Una expresión regular que definiremos para el encontrar el guión ():

Una cadena de texto que extraeremos del párrafo y lo almacenaremos en nuestra variable texto:

Pero, a esa cadena de texto le quitaremosLe quitamos el guión () para depurarla y enviarlaal contenido que extraeremos de la variable texto antes de enviar nuevamente al párrafo:

Y por último, haremos quemediante nuestra función devuelva un true oexpresión regular definida en falseexpresion en función deevaluaremos si encuentra o no el guión en eltexto original del párrafo que se pretendió evaluar poseía un guión al principio de su contenido:

Devolverá un true o false en función de lo descrito anteriomente.

Expresión regular

En cuanto a la expresión regular, el símbolo circunflejo (^) significa que debe encontrar el primer elemento. En ese caso, el guión (). Los paréntesis funcionan como signos de agrupación. Esa es su función.

Si quiere saber más sobre expresiones regulares consuleconsulte Expresiones Regulares de la documentación del Sitio Web Oficial de Mozilla.

Iteración de párrafos

Y para finalizar, iteramos los párrafos para evaluarlo:

Evaluarmos el párrafoPara evaluarla con nuestra función evaluar( parrafo ):

Y le aplicamosasignaremos la clase padding-left al párrafo que tiene el guión () al principio de su contenido para asignarle elsu espacio requeridoa la izquierda:

Obviamente, si evaluar( parrafo ) devuelte true.

He probado las soluciones aportadas y todas funcionan. Sin embargo, voy a aprovechar de poner mi grano de arena sobre este tema.

Por otra parte, se coloca la solución al principio para que pueda evaluar los resultados. Luego de eso, lea la explicación más abajo. Le será de mucha ayuda.

Posible solución

Esta sería una posible solución, pruébela y evalúe sus resultados:

console.clear();

const parrafos = document.querySelectorAll("p");

const evaluar = (parrafo) => {
  // Expresión para encontrar el primer guión:
  let expresion = /^(\–)/g;

  // Se obtiene el contenido del parrafo y se elimina el guión:
  let texto = parrafo.textContent.trim();
  parrafo.textContent = texto.replace(expresion, "");
  return expresion.test(texto);
}

parrafos.forEach(parrafo => {
  if (evaluar(parrafo)) {
    parrafo.classList.add("padding-left");
  }
});
.cuento p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}


/* Código CSS nuevo */

.padding-left {
  position: relative;
  padding-left: 30px;
}

.padding-left::before {
  content: "–";
  position: absolute;
  margin: auto;
  left: 0;
  padding-left: 15px;
}
<div class="cuento">
  <p>Érase una vez una preciosa niña que siempre llevaba una capa roja con capucha para protegerse del frío. Por eso, todo el mundo la llamaba Caperucita Roja.</p>
  <p>Caperucita vivía en una casita cerca del bosque. Un día, la mamá de Caperucita le dijo:</p>
  <p>– Hija mía, tu abuelita está enferma. He preparado una cestita con tortas y un tarrito de miel para que se la lleves ¡Ya verás qué contenta se pone!</p>

  <p> </p>
  <p>– ¡Estupendo, mamá! Yo también tengo muchas ganas de ir a visitarla – dijo Caperucita saltando de alegría.</p>
  <p>Cuando Caperucita se disponía a salir de casa, su mamá, con gesto un poco serio, le hizo una advertencia:</p>
  <p>– Ten mucho cuidado, cariño. No te entretengas con nada y no hables con extraños. Sabes que en el bosque vive el lobo y es muy peligroso. Si ves que aparece, sigue tu camino sin detenerte.</p>
  <p>– No te preocupes, mamita – dijo la niña- Tendré en cuenta todo lo que me dices.</p>
  <p>– Está bien – contestó la mamá, confiada – Dame un besito y no tardes en regresar.</p>
  <p>– Así lo haré, mamá – afirmó de nuevo Caperucita diciendo adiós con su manita mientras se alejaba.</p>
  <p>Cuando llegó al bosque, la pequeña comenzó a distraerse contemplando los pajaritos y recogiendo flores. No se dio cuenta de que alguien la observaba detrás de un viejo y frondoso árbol. De repente, oyó una voz dulce y zalamera.</p>
  <p>– ¿A dónde vas, Caperucita?</p>
</div>

La primera regla es para posicionar los párrafos (position: relative) que tienen los guiones y la segunda para colocarle guión que se le quitó con JavaScript. Pero, en la primera regla se agrega el espacio a la izquierda mediante relleno.

Se posiciona el párrafo para que los guiones que se encuentra en el pseudo-elemento no se escapen de él.

En esta segunda regla CSS utilizamos un pseudo-elemento para colocarle el guión:

En la función evaluar( parrafo ) vamos a evaluar el párrafo que pase como parámetro y averiguar si éste empieza con un guión (). De ser así, eliminar el guión y colocarle una clase en su lugar.

Por ejemplo, dentro de la función evaluar() tenemos:

Una expresión regular que definiremos para el encontrar el guión ():

Una cadena de texto que extraeremos del párrafo:

Pero, a esa cadena de texto le quitaremos el guión () para depurarla y enviarla nuevamente al párrafo:

Y por último, haremos que nuestra función devuelva un true o false en función de si encuentra o no el guión en el párrafo:

En cuanto a la expresión regular, el símbolo circunflejo (^) significa que debe encontrar el primer elemento. En ese caso, el guión (). Los paréntesis funcionan como signos de agrupación. Esa es su función.

Si quiere saber más sobre expresiones regulares consule Expresiones Regulares de la documentación del Sitio Web Oficial de Mozilla.

Y para finalizar, iteramos los párrafos para evaluarlo:

Evaluarmos el párrafo con nuestra función evaluar():

Y le aplicamos la clase al párrafo que tiene el guión () para asignarle el espacio requerido:

He probado las soluciones aportadas (además de útiles) y todas funcionan. Sin embargo, voy a aprovechar de poner mi grano de arena sobre este tema.

Por otra parte, se coloca la solución al principio para que pueda evaluarlo. Luego de eso, se explicará más abajo cómo funciona. Le será de mucha ayuda.

Una solución de muchas otras posibles

Pruébela y evalúe sus resultados:

const parrafos = document.querySelectorAll("p");

const evaluar = (parrafo) => {
  // Expresión para encontrar el primer guión:
  let expresion = /^(\–)/g;

  // Se obtiene el contenido del parrafo y se elimina el guión:
  let texto = parrafo.textContent.trim();
  parrafo.textContent = texto.replace(expresion, "");
  return expresion.test(texto);
}

parrafos.forEach(parrafo => {
  if (evaluar(parrafo)) {
    parrafo.classList.add("padding-left");
  }
});
.cuento p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}


/* Código CSS nuevo */

.padding-left {
  position: relative;
  padding-left: 30px;
}

.padding-left::before {
  content: "–";
  position: absolute;
  margin: auto;
  left: 0;
  padding-left: 15px;
}
<div class="cuento">
  <p>Érase una vez una preciosa niña que siempre llevaba una capa roja con capucha para protegerse del frío. Por eso, todo el mundo la llamaba Caperucita Roja.</p>
  <p>Caperucita vivía en una casita cerca del bosque. Un día, la mamá de Caperucita le dijo:</p>
  <p>– Hija mía, tu abuelita está enferma. He preparado una cestita con tortas y un tarrito de miel para que se la lleves ¡Ya verás qué contenta se pone!</p>

  <p> </p>
  <p>– ¡Estupendo, mamá! Yo también tengo muchas ganas de ir a visitarla – dijo Caperucita saltando de alegría.</p>
  <p>Cuando Caperucita se disponía a salir de casa, su mamá, con gesto un poco serio, le hizo una advertencia:</p>
  <p>– Ten mucho cuidado, cariño. No te entretengas con nada y no hables con extraños. Sabes que en el bosque vive el lobo y es muy peligroso. Si ves que aparece, sigue tu camino sin detenerte.</p>
  <p>– No te preocupes, mamita – dijo la niña- Tendré en cuenta todo lo que me dices.</p>
  <p>– Está bien – contestó la mamá, confiada – Dame un besito y no tardes en regresar.</p>
  <p>– Así lo haré, mamá – afirmó de nuevo Caperucita diciendo adiós con su manita mientras se alejaba.</p>
  <p>Cuando llegó al bosque, la pequeña comenzó a distraerse contemplando los pajaritos y recogiendo flores. No se dio cuenta de que alguien la observaba detrás de un viejo y frondoso árbol. De repente, oyó una voz dulce y zalamera.</p>
  <p>– ¿A dónde vas, Caperucita?</p>
</div>

La primera regla es para posicionar los párrafos (position: relative) que tienen los guiones y la segunda para colocarle el guión que se le quitó con JavaScript. Pero, en la primera regla se agrega el espacio a la izquierda mediante relleno (padding-left: 30px).

Se posiciona el párrafo para que los guiones que se encuentran en el pseudo-elemento ::before no se escapen de él.

En esta primera regla posicionamos el párrafo y le agregamos un espacio mediante relleno:

En esta segunda regla CSS utilizamos un pseudo-elemento para colocarle el guión () que previamente le habíamos quitado con JavaScript:

Obtenemos nuestra lista de nodos (en este caso, los párrafos):

Crearemos nuestra función evaluar( parrafo ) para evaluar, cada párrafo y conocer quién contiene un guión () al principio.

const evaluar = (parrafo) => {
    ...
}

Al párrafo que contenga el guión () al principio se le eliminará de su contenido y se le asignará en su lugar una clase (padding-left).

Funcionamiento interno de la función evaluar( parrafo )

Nuestra función consta de cuatro (04) líneas que se explican a continuación:

Una expresión regular que definiremos para encontrar el guión ():

Una cadena de texto que extraeremos del párrafo y lo almacenaremos en nuestra variable texto:

Le quitamos el guión () al contenido que extraeremos de la variable texto antes de enviar nuevamente al párrafo:

Y por último, mediante nuestra expresión regular definida en expresion evaluaremos si el texto original del párrafo que se pretendió evaluar poseía un guión al principio de su contenido:

Devolverá un true o false en función de lo descrito anteriomente.

Expresión regular

En cuanto a la expresión regular, el símbolo circunflejo (^) significa que debe encontrar el primer elemento. En ese caso, el guión (). Los paréntesis funcionan como signos de agrupación. Esa es su función.

Si quiere saber más sobre expresiones regulares consulte Expresiones Regulares de la documentación del Sitio Web Oficial de Mozilla.

Iteración de párrafos

Y para finalizar, iteramos los párrafos:

Para evaluarla con evaluar( parrafo ):

Y le asignaremos la clase padding-left al párrafo que tiene el guión () al principio de su contenido para asignarle su espacio a la izquierda:

Obviamente, si evaluar( parrafo ) devuelte true.

Origen Enlace
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30

He probado las soluciones aportadas y todas funcionan. Sin embargo, voy a aprovechar de poner mi grano de arena sobre este tema.

Por otra parte, se coloca la solución al principio para que pueda evaluar los resultados. Luego de eso, lea la explicación más abajo. Le será de mucha ayuda.

Posible solución

Esta sería una posible solución, pruébela y evalúe sus resultados:

console.clear();

const parrafos = document.querySelectorAll("p");

const evaluar = (parrafo) => {
  // Expresión para encontrar el primer guión:
  let expresion = /^(\–)/g;

  // Se obtiene el contenido del parrafo y se elimina el guión:
  let texto = parrafo.textContent.trim();
  parrafo.textContent = texto.replace(expresion, "");
  return expresion.test(texto);
}

parrafos.forEach(parrafo => {
  if (evaluar(parrafo)) {
    parrafo.classList.add("padding-left");
  }
});
.cuento p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}


/* Código CSS nuevo */

.padding-left {
  position: relative;
  padding-left: 30px;
}

.padding-left::before {
  content: "–";
  position: absolute;
  margin: auto;
  left: 0;
  padding-left: 15px;
}
<div class="cuento">
  <p>Érase una vez una preciosa niña que siempre llevaba una capa roja con capucha para protegerse del frío. Por eso, todo el mundo la llamaba Caperucita Roja.</p>
  <p>Caperucita vivía en una casita cerca del bosque. Un día, la mamá de Caperucita le dijo:</p>
  <p>– Hija mía, tu abuelita está enferma. He preparado una cestita con tortas y un tarrito de miel para que se la lleves ¡Ya verás qué contenta se pone!</p>

  <p> </p>
  <p>– ¡Estupendo, mamá! Yo también tengo muchas ganas de ir a visitarla – dijo Caperucita saltando de alegría.</p>
  <p>Cuando Caperucita se disponía a salir de casa, su mamá, con gesto un poco serio, le hizo una advertencia:</p>
  <p>– Ten mucho cuidado, cariño. No te entretengas con nada y no hables con extraños. Sabes que en el bosque vive el lobo y es muy peligroso. Si ves que aparece, sigue tu camino sin detenerte.</p>
  <p>– No te preocupes, mamita – dijo la niña- Tendré en cuenta todo lo que me dices.</p>
  <p>– Está bien – contestó la mamá, confiada – Dame un besito y no tardes en regresar.</p>
  <p>– Así lo haré, mamá – afirmó de nuevo Caperucita diciendo adiós con su manita mientras se alejaba.</p>
  <p>Cuando llegó al bosque, la pequeña comenzó a distraerse contemplando los pajaritos y recogiendo flores. No se dio cuenta de que alguien la observaba detrás de un viejo y frondoso árbol. De repente, oyó una voz dulce y zalamera.</p>
  <p>– ¿A dónde vas, Caperucita?</p>
</div>

Sin embargo, necesitamos explicarla.

Caso CSS

Se crean dos reglas CSS con un selector de clase .padding-left {}.

La primera regla es para posicionar los párrafos (position: relative) que tienen los guiones y la segunda para colocarle guión que se le quitó con JavaScript. Pero, en la primera regla se agrega el espacio a la izquierda mediante relleno.

Se posiciona el párrafo para que los guiones que se encuentra en el pseudo-elemento no se escapen de él.

.padding-left {
  position: relative;
  padding-left: 30px;
}

En esta segunda regla CSS utilizamos un pseudo-elemento para colocarle el guión:

.padding-left::before {
  content: "–";
  position: absolute;
  margin: auto;
  left: 0;

  /* Se necesita para que el guion (-) 
     no quede muy a la izquierda */
  padding-left: 15px;
}

Caso JavaScript

En JavaScript, lo que haremos es extraer todos los párrafos y averiguar cuáles de ellos empiezan con guión ().

const parrafos = document.querySelectorAll("p");

En la función evaluar( parrafo ) vamos a evaluar el párrafo que pase como parámetro y averiguar si éste empieza con un guión (). De ser así, eliminar el guión y colocarle una clase en su lugar.

La clase que se le colocará es la que le incorporará el espacio hacia la izquierda.

Por ejemplo, dentro de la función evaluar() tenemos:

Una expresión regular que definiremos para el encontrar el guión ():

let expresion = /^(\–)/g;

Una cadena de texto que extraeremos del párrafo:

let texto = parrafo.textContent.trim();

Pero, a esa cadena de texto le quitaremos el guión () para depurarla y enviarla nuevamente al párrafo:

parrafo.textContent = texto.replace(expresion, "");

Y por último, haremos que nuestra función devuelva un true o false en función de si encuentra o no el guión en el párrafo:

return expresion.test(texto);

En cuanto a la expresión regular, el símbolo circunflejo (^) significa que debe encontrar el primer elemento. En ese caso, el guión (). Los paréntesis funcionan como signos de agrupación. Esa es su función.

\– Es el guión () que se pretende encontrar.

Si quiere saber más sobre expresiones regulares consule Expresiones Regulares de la documentación del Sitio Web Oficial de Mozilla.

Y para finalizar, iteramos los párrafos para evaluarlo:

parrafos.forEach(parrafo => {
  ...
});

Evaluarmos el párrafo con nuestra función evaluar():

if (evaluar(parrafo)) {
  ...
}

Y le aplicamos la clase al párrafo que tiene el guión () para asignarle el espacio requerido:

parrafo.classList.add("padding-left");