Dada una string de varias líneas, la tarea es reemplazar los saltos de línea con la etiqueta <br>.
Ejemplo:
Entrada : `Geeks for Geeks es
un portal de informática
donde la gente estudia informática`
Salida : «Geeks for Geeks es <br> un portal de informática <br> donde la gente estudia informática»
Para lograrlo contamos con los siguientes métodos:
Método 1: Usando Regex, en este ejemplo, estamos creando un párrafo y un botón y al hacer clic en el botón estamos cambiando (agregando <br>) el texto del párrafo.
Estamos usando el método String.replace() de expresiones regulares para reemplazar la nueva línea con <br>.
String.replace () es un método incorporado en JavaScript que se usa para reemplazar una parte de la string dada con otra string o una expresión regular. La string original permanecerá sin cambios.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<body>
<p id="para"></p>
<p>
<button onClick="myFunc()">Change</button>
<script>
let str = `Geeks for Geeks is
a computer science portal
where people study computer science`;
let para = document.getElementById("para");
para.innerHTML = str;
function myFunc() {
// Replace the \n with <br>
str = str.replace(/(?:\r\n|\r|\n)/g, "<br>");
// Update the value of paragraph
para.innerHTML = str;
}
</script>
</p>
</body>
</html>
Producción:
La salida inicial
Después de hacer clic en el botón
Método 2: Usando dividir y unir, en este método, dividimos la string desde el delimitador «\n» que devuelve una array de substrings, y luego unimos la array usando el método de combinación y pasamos <br /> para que cada combinación contiene <br />.
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<body>
<p id="para"></p>
<p>
<button onClick="myFunc()">Change</button>
<script>
let str = `Geeks for Geeks is
a computer science portal
where people study computer science`;
let para = document.getElementById("para");
para.innerHTML = str;
function myFunc() {
// Replace the \n with <br>
str = str.split("\n").join("<br />");
// Update the value of paragraph
para.innerHTML = str;
}
</script>
</p>
</body>
</html>
Producción:
La salida inicial
Después de hacer clic en el botón
Publicación traducida automáticamente
Artículo escrito por _saurabh_jaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA