Aquí hay un área de texto simple y un botón, estoy tratando de enviar el valor del área de texto (contenido) a <div id="rs"></div> con cada línea separada del cuadro de área de texto (significa cuando ingresamos el botón o Saltos de línea viene luego todas las líneas) agregando a div en un nuevo elemento separado.
por ejemplo, después de hacer clic en el botón addText , quiero que mi estructura de salida sea así:
<div id="rs"> <div class='rslines'> first line of textarea- abc </div> <div class='rslines'> second line of textarea- def </div> <div class='rslines'> third line of textarea- ghi </div> ..... and so on </div>Lo que debo cambiar en mi código:
$('#addtext').click(function(){ var content = $("#cmt_content").val().replace(/(\n|\r|\r\n)/g, "<div class='rslines'></div>"); $('#rs').append(content); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <textarea id="cmt_content" rows="10" cols="60"></textarea> <br> <button id="addtext"> addText </button> <div id="rs"></div> simplemente en este momento obtengo todas las líneas fuera de <div class='rslines'> </div> Pero quiero todas las líneas dentro de este div.
En lugar de hacer coincidir las líneas nuevas, haga coincidir todo el contenido en una línea; con .+ , hará coincidir cualquier carácter excepto las líneas nuevas, y luego puede reemplazarlo con <div class='rslines'>$&</div> para poner el texto coincidente de cada línea dentro de <div> s.
$('#addtext').click(function(){ var content = $("#cmt_content").val().replace(/.+/g, "<div class='rslines'>$&</div>"); $('#rs').append(content); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <textarea id="cmt_content" rows="10" cols="60"></textarea> <br> <button id="addtext"> addText </button> <div id="rs"></div>