Skip to main content
Publicación recuperada por Sal
Clase para crear el espacio a la izquierda
Origen Enlace
Sal
  • 7.8k
  • 1
  • 11
  • 21

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?.

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 ambos.

Con javascript/jQuery:

$( function(){
        Array.from(
            document.getElementsByTagName('p')
        ).forEach(
            function(e,i,a){
                e.innerText = e.innerText.replace(/([-–])/g,'$1 ');
            }
        )
    }
);
.cuento p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
<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 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>

</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?.

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 usa el segundo.

Con javascript/jQuery agregamos una clase a los párrafos que comiencen con .

$( function(){
    Array.from(
      document.getElementsByTagName('p')
    ).forEach(
      function(e){
        if( e.innerText.match(/^[-–]/) )
          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 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>

</body>
</html>
Publicación eliminada por Sal
Diferencia de caracteres
Origen Enlace
Sal
  • 7.8k
  • 1
  • 11
  • 21

Ten presente la diferencia entre -y 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 ambos.

$( function(){
        Array.from(
            document.getElementsByTagName('p')
        ).forEach(
            function(e,i,a){
                e.innerText = e.innerText.replace('–'/([-–])/g,'– '$1 ');
            }
        )
    }
);
.cuento p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
<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 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>

</body>
</html>

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 ambos.

$( function(){
        Array.from(
            document.getElementsByTagName('p')
        ).forEach(
            function(e,i,a){
                e.innerText = e.innerText.replace('–','–  ');
            }
        )
    }
);
.cuento p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
<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 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>

</body>
</html>

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 ambos.

$( function(){
        Array.from(
            document.getElementsByTagName('p')
        ).forEach(
            function(e,i,a){
                e.innerText = e.innerText.replace(/([-–])/g,'$1 ');
            }
        )
    }
);
.cuento p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
<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 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>

</body>
</html>
Diferencia de caracteres
Origen Enlace
Sal
  • 7.8k
  • 1
  • 11
  • 21

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 ambos.

Con javascript/jQuery:

Con javascript/jQuery:

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 ambos.

Con javascript/jQuery:

Origen Enlace
Sal
  • 7.8k
  • 1
  • 11
  • 21
Loading