Estoy trabajando con BootstrapVue .
Tengo una string como la siguiente: Hola, mi nombre es B0BBY, ¿cómo estás?
Ahora quiero mostrar esta cadena en un <b-modal> y reemplazar todo / (Slash) con un salto de línea. Intenté lo siguiente:
var newString = actualString.replaceAll(" / ", "\n") Si console.log este newString , se muestra en mi consola con un salto de línea. Pero si lo estoy usando en mi b-modal , no se muestra con un salto de línea, todo está en una sola línea.
Creo que hay una solución bastante simple para esto, pero no puedo resolverlo. ¡Gracias por ayudarme!
Hay dos posibilidades. Si desea usar \n en su HTML, debe establecer un white-space: pre-line; para el elemento padre.
O simplemente puede reemplazar \n con <br> . Ambos son posibles.
var newString = actualString.replaceAll(" / ", "<br>")
actualString = "Hello / my name / is B0BBY / how / are you ?"; var newString = actualString.replaceAll(" / ", "\n") console.log(newString) document.getElementById('out').innerHTML = newString; <div id="out" style="white-space: pre-line; "></div>Se supone que las líneas en HTML deben estar separadas con elementos de bloque ( <p> , etc.) o <br> . Cambiar la forma en que se representa el texto de varias líneas (como muestra otra respuesta) es un truco que no es necesario en circunstancias normales cuando el diseño HTML puede verse afectado directamente.
La cadena se puede separar y representar como una matriz:
<b-modal> <p v-for="(line, index) in lines(actualString)" :key="index">{{line}}</p> Donde lines es un método (se puede convertir en un filtro o en un cálculo):
lines: actualString => actualString.replaceAll(" / ", "\n")