2

When pasting data from the clipboard into an html textarea, it does some pretty cool parsing to make the paste look close to what was copied as far as newlines go.

For example, I have the following html on a page that I select (everything highlights in blue) and then I copy it:

Hello
<br>
<br>
<br>
<div>more</div>
<div>last</div>

So to be clear, what I am copying is what the output of this jsfiddle looks like.

Now when I paste this magical, copied text into a text area, I see exactly what I would expect: "Hello", empty line, empty line, empty line, "more", "last". Cool! Then when I use jQuery's .val() on the textarea, I get "Hello\n\n\nmore\nlast". Super cool. It took the br's and div's and was able to infer the correct newlines from it.

Now...

What I am trying to do it programmatically take the same data I copied earlier and set it as the textarea's value as if it were pasted.

Here is what I have tried...

So, say the stuff I copied earlier was wrapped in a <div id="parent">...</div>.

var parent = $("#parent");
var textarea = $("#theTextArea");

// Set the value of the text area to be the html of the thing I care about
textarea.val(parent.html());

Now I know this isn't the same as a copy-paste, but I was hoping it would take care of me and do what I wanted. It doesn't. The textarea gets filled with Hello<br><br><br><div>more</div><div>last</div>. The html that was once invisible is now stringified and made part of the text.

Obviously I did this wrong. .html() returns, of course, the string of html. But is there something I could call on parent that would give me the text with all inferred linebreaks?. I have tried calling parent.text(), but this only gives Hellomorelast (no line breaks).

A few notes that could help with an answer: I am using Angular, so I have access to all their goodies and jQuery.

Eric Olson
  • 2,827
  • 1
  • 20
  • 21
  • 1
    When you copy some text (browser/pdf/word) it has 2 types of values: text and raw data. When textarea accepts text from clipboard, it takes text instead of raw data. I think you need to take a look to elements with attribute **contenteditable** which I think accepts raw data if it is xml (like hmtl) – Epsil0neR Dec 01 '15 at 19:47
  • Thanks @Epsil0neR. Actually, the whole reason for this is that I have a contenteditable div as a user input. I need to process certain elements and replace with text, but the rest of the elements I want gone (api will not accept html markup). So I figured the easiest way to convert the
    and
    from the contenteditable div was to throw it all in a textarea programmatically and then get the data from there.
     – Eric Olson Dec 01 '15 at 19:54

1 Answers1

0

Edit:

Solution


It is not nice but you can try to replace html tags with line breaks '\n' or do some line breaks in the html file and get the content with text().

var parent1 = $("#paren1");
var textarea1 = $("#theTextArea1");

var parent2 = $("#paren2");
var textarea2 = $("#theTextArea2");

// Set the value of the text area to be the html of the thing I care about
var text = parent1.html();
text = text.replace(new RegExp("<br>", 'g'),"\n");
text = text.replace(new RegExp("<div>", 'g'),"");
text = text.replace(new RegExp("</div>", 'g'),"\n");
textarea1.val(text);

textarea2.val(parent2.text());

JSFiddle

Community
  • 1
  • 1
Kev
  • 577
  • 1
  • 10
  • 29
  • Thanks for the suggestion! But this has a few flaws in it. For example, if I have several nested `div`s, and only the deepest one has content, it should appear as if there is only 1 newline. Your approach is assuming that every div will cause a newline. – Eric Olson Dec 01 '15 at 21:07
  • 1
    Maybe that's what you're looking for http://stackoverflow.com/questions/3813167/what-is-the-most-convenient-way-to-convert-html-to-plain-text-while-preserving-l – Kev Dec 01 '15 at 21:45
  • Yes! That is it! Works perfectly. Thanks you so much. – Eric Olson Dec 01 '15 at 22:22