以代码片段的形式显示javascript

我想要做的是在页面上显示一段JavaScript代码，并且不会运行它，只需显示为供人们复制的代码片段即可。我打开谷歌的美化，然后在页面上我有这样的代码：以代码片段的形式显示javascript

<pre class="prettyprint"> 
    <script> 
    $(document).ready(function(){ 
     setTimeout(function(){ 
     console.log('deleting cookie'); 
     $.cookie('cookie',null,{domain: document.domain}); 
    },1000); 
    }); 
    </script> 
    </pre>

但这代码只是执行，并不会显示JS代码片段。我在这里错过了什么？

来源

2013-07-19 Webster Gordon

尝试查看源代码这个问题的HTML，这会告诉你一种方式。 –

哈哈很好的电话.. –

您需要将<和>字符转换为HTML实体，像这样：

<pre class="prettyprint"> 
    &lt;script&gt; 
    $(document).ready(function(){ 
     setTimeout(function(){ 
     console.log('deleting cookie'); 
     $.cookie('cookie',null,{domain: document.domain}); 
     },1000); 
    }); 
    &lt;/script&gt; 
</pre>

我也建议包裹代码<code>标签除了现有<pre>标签。

来源

2013-07-19 18:42:22 Travis

它正在运行，因为<script>标签。您应该对其进行编码：

<pre class="prettyprint"> 
&lt;script&gt; 
$(document).ready(function(){ 
    setTimeout(function(){ 
    console.log('deleting cookie'); 
    $.cookie('cookie',null,{domain: document.domain}); 
},1000); 
}); 
&lt;/script&gt; 
</pre>

来源

2013-07-19 18:42:23 basher

使用<script>和</script>为<script>标签

来源

2013-07-19 18:42:33

你的问题是，你正在进入HTML，你希望它不是作为HTML处理。具体来说，开头<script>元素。

为了输入不会被解析为HTML的HTML，您需要对HTML特殊的字符进行编码。例如，<编码为<,>编码为>，并且&编码为&。

所以，输出没有它的下面被解析为HTML：

<script>...</script>

...你需要输入：

&lt;script&gt;...&lt;/script&gt;

来源

2013-07-19 18:42:34 Jim

-1

让textContent属性（或createTextNode）做的所有编码无论你需要插入到DOM中的任何文本繁重的提升：

var sampleCode="<script> $(document).ready(function(){ setTimeout(function(){ console.log('deleting cookie'); $.cookie('cookie',null,{domain: document.domain}); },1000); }); </script>"; 
var pre=document.createElement("pre"); 
pre.textContent=sampleCode; 
pre.className="prettyprint"; 
document.body.appendChild(pre);

来源

2013-07-19 18:52:40 jongo45

以代码片段的形式显示javascript

回答

相关问题