使用javascript

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＆＃39;并能够从中推断出正确的换行符。

现在...

我尝试以编程方式执行此操作时使用我之前复制的相同数据并将其设置为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());

现在我知道这不像复制粘贴一样，但我希望它会照顾我并做我想做的事情。它没有。 textarea充满了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