Ten presente la diferencia entre -
y —
, dependiendo de la fuente pueden verse iguales pero son códigos de caracter distintos, el primero es el signo de "menos", el segundo es ligeramente mas largo que el primero; tu texto contiene ambosusa el segundo.
Con javascript/jQuery: agregamos una clase a los párrafos que comiencen con –
.
$( function(){
Array.from(
document.getElementsByTagName('p')
).forEach(
function(e,i,a){
e.innerText =if( e.innerText.replacematch(/([^[-–])/g,'$1) ');
e.classList.add("dialogo");
}
}
)
}
);
.cuento p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
.cuento .dialogo{
margin-left: 12px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Cuento</title>
</head>
<body>
<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<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<p>– ¡Estupendo, mamá! Yo también tengo muchas ganas de ir a visitarla –dijo– 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<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<p>– No te preocupes, mamita –dijo– dijo la niña- Tendré en cuenta todo lo que me dices.</p>
<p>–Está<p>– Está bien –contestó la mamá, confiada –Dame– Dame un besito y no tardes en regresar.</p>
<p>–Así<p>– Así lo haré, mamá –afirmó– 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<p>– ¿A dónde vas, Caperucita?</p>
</div>
</body>
</html>
Habría que evaluar si hacer el reemplazo en el browser es lo mejor. ¿Por qué dejarle esa carga al cliente?. ¿Algún problema en hacer la búsqueda y reemplazo -sólo una vez- desde el texto original antes de agregarlo al HTML?.