0

I have the following which is fine, it does convert the <p> tags into <br> and wrap the whole text in a <p>. however I am seeing the html tags <p> and <br> inside the text area, how can I only see the line breaks without to see the html tags in it?

<textarea id ="usp-content"><textarea>

$(blurbt).find('p').each(function(){
   $( this ).replaceWith( $( this ).text() + "<br/>" );
});
$(blurbt).wrapInner("<p></p>");
var pOnly  = $(blurbt).html();
$('#usp-content').text(pOnly);

I'd simply would like to paste the plain text while keeping the line breaks visually not with the <br>

rob.m
  • 9,843
  • 19
  • 73
  • 162

2 Answers2

1

You don't need to use a contenteditable="true".

You can simple do the following:

Change $('#usp-content').text(pOnly); to:

$('#usp-content').val(pOnly.replace(/<br[\s\/]*>/gm, "\n"));

To reverse this incase you are sending the content of the textarea to server side and want html markup, simply use:

var data = $('#usp-content').val().replace(/\\n/gm, "<br>");
  • what happens then if I am sending the textarea with php? How will it consider the /n? – rob.m Mar 19 '17 at 20:43
  • thanks a lot, one last thing, by changing that line it only replace one
    , should we have it in a .each() ?     – rob.m Mar 19 '17 at 20:51
  • 1
    Updated the answer to allow multiple and multiline replace –  Mar 19 '17 at 20:53
  • 1
    Just added a g character along with the m. This is to allow for both multiline and multiple occurrence. –  Mar 19 '17 at 20:55
0

We cannot render the html inside a textarea we need to use a contenteditable in a div, see SO Answers here. Therefore in my case I will have to place a div with html formatted and set the textarea as hidden to get the same value as per what user sees.

 <div contenteditable="true"></div>
Community
  • 1
  • 1
rob.m
  • 9,843
  • 19
  • 73
  • 162