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
.