Question

我有一个页面，我希望它将描述它的javascript转储到<code>块中。问题是如果我在脚本字符串文字中使用$('pre code').html(data);浏览器解释标记和格式化中断。相反，如果我使用$('pre code').text(data);，则执行我的脚本，导致页面呈现两次并复制一些元素。

我知道这是一个奇怪的用例，但这种问题是否有任何规范的解决方案？我目前的解决方案是渲染框并同时执行脚本。

$.get("index.js", function(data, status)
{
    //Populate the code box and rn the page javascript at the same time
    //It seems to be impossible to set the text without making the javascript execute
    $('pre code').text(data);
    $('pre code').each(function(i, block) {
        hljs.highlightBlock(block);
    });
});

Answer 1

在dataType来电中将text媒体资源设为jQuery.get()：

$.get("index.js", function(data, status){
    $('pre code').html(data);
},"text"); // add this

dataType属性为：

服务器所需的数据类型。默认值：智能猜测（xml，json，脚本，文本，html）。

不是很好的演示，因为无论如何都不会执行，but here's the example above将jQuery库作为纯文本

Answer 2

Pre用于多行，代码用于单行代码段。这不是您正在寻找的代码，但它举例说明。代码标记中不保留空格。因此，您只需要一个预标签来显示所有代码行。此外，非常重要您替换＆lt;和＆gt;使用＆amp; gt和＆amp; lt，否则您的JavaScript文件中的任何内联HTML都将被执行（或者您只能使用.text函数）。

<pre></pre>

<code>
tset
stest
tset
</code>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>

$.get("test.js",function (data) {
    $("pre").html(data.replace(/\</g,"&lt;").replace(/\>/g,"&gt;"));
});

</script>

防止执行JQuery加载的示例脚本

2 个答案: