如何将换行符从 HTML div 复制到 jQuery 中的 textarea？

Posted 2023-05-07

【中文标题】如何将换行符从 HTML div 复制到 jQuery 中的 textarea？

【英文标题】：How to copy newline characters from HTML div to textarea in jQuery?

【发布时间】：2011-10-18 08:05:30

【问题描述】：

考虑以下 html 页面片段：

<div id='myDiv'>
    Line 1.<br />
    Line 2<br />
    These are &ltspecial&gt; characters &amp; must be escaped !@@&gt;&lt;&gt;
</div>
<input type='button' value='click' id='myButton' />
<textarea id='myTextArea'></textarea>

<script>
    $(document).ready(function () 
        $('#myButton').click(function () 
            var text = $('#myDiv').text();
            $('#myTextArea').val(text);
        );
    );
</script>

首先，有一个id为myDiv的div元素。它包含一些文本，类似于在我的生产网站运行时从 SQL 数据库中检索到的文本。

接下来，有一个按钮和一个文本区域。我希望myDiv 中的文本在单击按钮时出现在文本区域中。

但是，使用我提供的代码，换行符被删除了。考虑到转义特殊字符是绝对不可协商的，我该怎么办？

【问题讨论】：

我应该补充一点，从文本区域中的用户输入读取换行符对我来说一直没有问题。问题在于在文本区域中设置文本。到目前为止，我找到的唯一解决方案是将文本保存在序列化字符串中，但这真的感觉像是 KLUDGE。

在 Chrome 中为我工作。 jsfiddle.net/jasongennaro/8P8fH

【参考方案1】：

您的代码在 Firefox 和 Chrome 中都非常适合我：http://jsfiddle.net/jYjRc/

但是，如果您的客户端不符合您的要求，请将 <br>s 替换为换行符。

编辑：在 IE7 中测试并且代码中断。所以我用我的建议更新了小提琴：http://jsfiddle.net/jYjRc/1/

【讨论】：

这很有趣。我什至很少在 Firefox 中测试我的代码，因为我们是一家仅限 IE 的商店 :-( :-( :-(

不幸的是，您用换行符替换 <br>s 的建议不起作用，因为 $('#myTextArea').val() 返回 Line 1.Line 2These... 而没有任何换行的迹象。

您在 jsfiddle 上链接的解决方案对我不起作用。它使换行符正确，但特殊字符不会被转义。这将使普通用户无法使用这些字符并使它们受到来自恶意用户的 XSS 攻击。到目前为止，我倾向于像以前一样只使用序列化字符串。

您必须具体说明要转义的字符。

我需要所有可能不安全的字符转义。 AFAIK，这意味着 和 &

【参考方案2】：

你的 HTML 像这样：

<div id='myDiv'><pre>
Line 1.
Line 2
These are &ltspecial&gt; characters &amp; must be escaped !@@&gt;&lt;&gt;
</pre></div>

现在.text() 将返回与您在<pre> 标记中指定的文本完全相同的文本，即使在 IE 中也是如此。