jquery在textarea中将脚本块显示为html

Question

我希望在文本区域中显示这样的脚本参考代码，以便用户可以复制它。

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"/>

我正在使用 jquery 并尝试使用 Stackoverflow 或其他地方找到的许多解决方案，但它们都不适合我。这是我的代码片段：

var jqueryMin = $('<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"/>');
var readyHtml = $('<div>').append($(jqueryMin).clone()).html();
$('#headerHtml').text(readyHtml);

readyHtml 是空字符串，尽管当我克隆其他不是脚本块的 html 代码时它可以工作。

Answer 1

您已将 jqueryMin 定义为对象 - 将其定义为字符串。

var jqueryMin = '<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"/>';
$('#headerHtml').html('<div>'+jqueryMin+'</div>');

Answer 2

实现您想要做的事情的最简单方法可能是这样的：

var myCode = '<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"/>';
myCode = myCode.replace('<', '<').replace('>', '>');
$('#headerHtml').html('<div>'+myCode+'</div>');

通过完全替换括号，就任何浏览器而言，您都可以将其呈现为纯文本。但是，当查看它时，代码将按预期显示，并且复制/粘贴将按预期工作。