how to wrap each line inside a textarea by html tags?

Question

I want to replace each lorem ipsum with <p>lorem ipsum</p> inside a textarea.

So each line should be wrapped by <p>...</p> .

I'm searching on google to find what code I could try - without success.

Any help?

 $('button').on('click', function(){ // add <p> and </p> }); 

 .txa{ display:block; width:100%; resize:none; height:30vh; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea class='txa'> lorem ipsum lorem ipsum lorem ipsum </textarea> <br> <button>CLICK</button> 

Answer 1

You can use a combination of map and join to split the text apart, wrap it in your <p></p> tags and set the value back to the textarea.

 $('button').on('click', function(){ var text = $('.txa').val(); var result = text.split("\\n") .filter(x => x.length > 0) .map(t => `<p>${t}</p>`) .join("\\n"); $('.txa').val(result) }); 

 .txa{ display:block; width:100%; resize:none; height:30vh; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea class='txa'> lorem ipsum lorem ipsum lorem ipsum </textarea> <br> <button>CLICK</button> 

Answer 2

Use replace with a simple regex.

 $('button').on('click', function() { $(".txa").html($(".txa").html().replace(/(lorem ipsum)/g, "<p>$1</p>")); }); 

 .txa { display: block; width: 100%; resize: none; height: 30vh; } 

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <textarea class='txa'> lorem ipsum lorem ipsum lorem ipsum </textarea> <br> <button>CLICK</button> 

If the actual result is each line in <p></p> :

 $('button').on('click', function() { $(".txa").html($(".txa").html().split("\\n").map(e => `<p>${e}</p>`).join("\\n")); }); 

 .txa { display: block; width: 100%; resize: none; height: 30vh; } 

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <textarea class='txa'> lorem ipsum lorem ipsum lorem ipsum</textarea> <br> <button>CLICK</button> 

Answer 3

You can use regex to capture every lines

// capture everything up to a newline
/(.*[^\n])/g

 $('button').on('click', function(){ $(".txa").val($(".txa").val().replace(/(.*[^\\n])/g, "<p>$1</p>")); }); 

 .txa{ display:block; width:100%; resize:none; height:30vh; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea class='txa'> lorem ipsum lorem ipsum bla bla Hello world lorem ipsum </textarea> <br> <button>CLICK</button> 

Answer 4

So tried a different take which fixes the bad behavior where either doesn't update your lines if they are typed after page load or the duplicating issue with the "p" tags.

This will only update the lines if that line has no existing "p" tags. if it does it will remove them first then replace the string, this is so that there are no duplicate tags

Hope you like it.

 function insertLine() { var lines = $('textarea').val().split('\\n'); var newLines = ''; for (var i = 0; i < lines.length; i++) { if (lines[i] !== "" && !lines[i].includes('<p>')) { newLines += '<p>' + lines[i] + '</p>'; newLines += '\\n'; } else if (lines[i] !== "") { lines[i] = lines[i].replace('<p>', ''); lines[i] = lines[i].replace('</p>', ''); lines[i] = lines[i].replace(/(.*[^\\n])/g, '<p>' + lines[i] + '</p>'); newLines += lines[i]; newLines += '\\n'; } } $('.txa').val(newLines); } 

 .txa { display: block; width: 100%; resize: none; height: 30vh; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea class="txa"> text 1 text 2 text 3 Type a few lines of your own. </textarea> </br> <button onclick="insertLine();">RUN</button>