4

Hola estoy intentando hacer saltos de linea en un objeto JSON, cuando envio un formulario con un textarea y con los espacios necesarios tan solo me saca \n cada vez que hay un salto de linea.

var textoJSON = {
 texto:"Hola mi nombre es \nJuancho Carrazco y tengo un lobby \nen el peñazco",
}

Yo quiero que salga así en el html

texto: "Hola mi nombre es
        Juancho Carrazo y tengo un lobby
        en el peñazco"

Pero me aparece así

texto : "Hola mi nombre es Juancho Carrazo y tengo un lobby en el peñazco"

El problema esta que cuando hago una petición al backend del JSON, no me salen las \n, al parecer el html no las interpreta como saltos de linea, pero cada vez que subo el texto con sus espacios me sube también las \n necesito saber como hacer los saltos de linea correctamente para posteriormente hacer la petición y me imprima en el html los saltos debidos.

1
  • considero que deberias guardar en la bbdd los textos con un formato de texto enriquecido (tipo markdown, por ej) y que cuando lo envie a un cliente (por ej, navegador) lo convierta a html y utilices el css correspondiente. Ten en cuenta que la bbdd no tiene por que saber cual es el cliente final (aqui presupones que va a ser el navegador, pero... y si haces un comando que tenga que mostrar ese texto? vas a tener que hacer una conversion de tu formato al de texto. O si es otro dispositivo, vas a tener que darle otro formato distinto...
    – Jakala
    Commented el 18 dic. 2019 a las 7:39

4 respuestas 4

6

Puedes hacer uso de propiedades de CSS para lograrlo, en específico la propiedad white-space con valor pre-wrap que como dice la (documentación) Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks se respetarán los saltos de línea.

No es el único valor que puede tomar, y existen otros que pueden igual respetar saltos de línea pero tener comportamiento diferente en otras situaciones, te recomiendo leer la documentación para encontrar cuál te conviene más.

Por último dejo un ejemplo de su funcionamiento.

const textoJSON = {
    texto:"Hola mi nombre es \nJuancho Carrazco y tengo un lobby \nen el peñazco"
};

(() => {
    document.querySelector("button").onclick = () => {
        textoJSON.texto = document.querySelector("textarea").value;
        console.log(textoJSON);
        document.querySelector("#texto").textContent = textoJSON.texto;
    }
})();
#texto{
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
}
<textarea>Hola mi nombre es 
Juancho Carrazco y tengo un lobby 
en el peñazco</textarea>
<button>Mostrar texto</button>
<p>texto: <span id="texto"></span></p>

2
  • Muchisimas gracias, realmente me sirvio que Dios te siga dando mucha sabiduría y te de un trabajo donde ganes 1.000.000.000 xD Commented el 19 dic. 2019 a las 6:21
  • De nada, para eso estamos
    – ben
    Commented el 19 dic. 2019 a las 9:00
6

window.addEventListener('load', function(){
var textoJSON = {
 texto:"Hola mi nombre es \n"+
 "Juancho Carrazco y tengo un lobby\n"+
 "en el peñazco",
}


alert(textoJSON.texto);


});

Prueba este codigo, si regresa ya el salto de linea y es que hay que segmentar cuando termina una linea con \n para el salto de linea.

2

Si lo quieres plasmar en un <textarea> no deberías tener problemas, pero si lo quieres plasmar en HTML te enfrentas a que un salto de línea en código fuente es renderizado solo como un espacio en blanco más.

Para poder usar los saltos de línea como tal, debes usar las etiquetas <br />, y para lograrlo debes hacer esto:

var textoJSON = {
 texto:"Hola mi nombre es \nJuancho Carrazco y tengo un lobby \nen el peñazco",
};

// función replace
var textoEnHtml = textoJSON.texto.replace(/\n/g, "<br />");


document.getElementById("myText").innerHTML = textoEnHtml;
<span id="myText"></span>

Con la función replace sustituyes cada salto de línea literal (\n) con un salto de línea en HTML (<br/>) y el navegador lo renderizará como tal.

2
  • 1
    En caso de optar por usar innerHTML, recomiendo antes sanitizar el texto para evitar inyecciones XSS. Uno nunca sabe lo que el usuario puede intentar hacer jaja.
    – ben
    Commented el 18 dic. 2019 a las 7:15
  • Ya lo intente, y esto es lo que me sale en el html Soy Juancho Carrazco<br />tengo un lobby en<br />el peñazco Commented el 19 dic. 2019 a las 6:18
0

La respuesta de ben funciona de maravilla. Solamente quisiera agregar que es muy útil y me funcionó lo siguiente: en mi archivo principal index.css, establecí en mi ::root junto con otros parámetros como la paleta de colores, fonts, etc un .wrap {white-space: pre-wrap;} y así nada más con establecer esa clase en cualquier otro elemento html se aplica el salto de línea. Espero les sea de utilidad! Saludos y gracias por ayudar!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.