用javascript模擬粘貼到Textarea中

Question

將剪貼板中的數據粘貼到html textarea時，它會進行一些非常酷的解析，以使粘貼看起來與復制到換行符為止的內容接近。

例如，在我選擇的頁面上有以下html（所有突出顯示為藍色），然后copy其copy ：

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

很清楚，我要復制的是此jsfiddle的輸出。

現在，當我將這種神奇的，復制的文本粘貼到文本區域中時，我可以確切地看到我所期望的： "Hello", empty line, empty line, empty line, "more", "last" 。 涼！ 然后，當我在文本區域上使用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

編輯：

解

---

這不是很好，但是您可以嘗試用換行符'\\ 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