使用 javascript 模拟粘贴到 Textarea

Question

将剪贴板中的数据粘贴到 html 文本区域时，它会进行一些非常酷的解析，以使粘贴看起来接近于换行符所复制的内容。

例如，我在我选择的页面上有以下 html（所有内容都以蓝色突出显示），然后我 copy它：

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

所以要清楚，我要复制的是this jsfiddle 的输出。

现在，当我将这个神奇的复制文本粘贴到文本区域时，我看到的正是我所期望的："Hello", empty line, empty line, empty line, "more", "last"。凉爽的！然后，当我在 textarea 上使用 jQuery 的 .val() 时，我得到"Hello\n\n\nmore\nlast"。超酷。它采用了br 和div 并能够从中推断出正确的换行符。

现在...

我正在尝试以编程方式获取我之前复制的相同数据并将其设置为 textarea 的值，就像它被粘贴一样。

这是我尝试过的......

所以，假设我之前复制的内容被包裹在 <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());

现在我知道这与复制粘贴不同，但我希望它会照顾我并做我想做的事。它没有。文本区域被Hello<br><br><br><div>more</div><div>last</div> 填充。曾经不可见的 html 现在被字符串化并成为文本的一部分。

显然我做错了。 .html() 当然返回 html 字符串。但是有什么我可以打电话给parent 的东西，它会给我带有所有推断换行符的文本吗？我试过打电话给parent.text()，但这只会给Hellomorelast（没有换行符）。

一些可以帮助回答的注释：我正在使用 Angular，所以我可以访问他们所有的好东西和 jQuery。

Answer 1

编辑：

Solution

---

这不太好，但你可以尝试用换行符'\n'替换html标签，或者在html文件中做一些换行符，然后用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