如何在网页上显示HTML片段,而不需要将每个<替换为&lt;>和&gt;?

换句话说,是否有一个标记表示在点击结束标记之前不呈现HTML ?


当前回答

这是一种hack,但是我们可以使用类似的东西:

正文脚本{ 显示:块; 字体类型:等宽字体; 空白:前; } <脚本type = " text / html " > <标题> Hello World h1 > < / < ul > <li>享受这个狡猾的黑客, <李>或不! < / ul > > < /脚本

使用该CSS,浏览器将在主体中显示脚本。它不会尝试执行这个脚本,因为它有一个未知的类型text/html。在<script>中没有必要转义特殊字符,除非你想包含一个结束</script>标记。

我正在使用类似这样的东西在页面主体中显示可执行的JavaScript,这是一种“有文化的编程”。

在这个问题中还有更多的信息,标签什么时候应该可见,为什么可以?

其他回答

function escapeHTML(string)
    { 
        var pre = document.createElement('pre');
        var text = document.createTextNode(string);
        pre.appendChild(text);
        return pre.innerHTML;
}//end escapeHTML

它将返回转义的Html

我很久以前用过这个,它对我很有用,我希望它也能帮助到你。

var preTag = document.querySelectorAll('pre'); console.log(preTag.innerHTML); for (var i = 0; i < preTag.length; i++) { var pattern = preTag[i].innerHTML; pattern = pattern.replace(/&lt;/g, “&lt;”).replace(/&gt;/g, “&gt;”); 控制台.log(模式); preTag[i].innerHTML = pattern; } <pre> <p>例</p> <span>更多文字</span> </pre>

这是一个简单的技巧,我已经在Safari和Firefox中尝试过了

<code>
    <span><</span>meta property="og:title" content="A very fine cuisine" /><br>
    <span><</span>meta property="og:image" content="http://www.example.com/image.png" />
</code>

它将显示如下:

你可以在这里现场观看

在HTML中有几种方法可以转义所有内容,但都不是很好。

或者你可以放入一个iframe来加载一个普通的旧文本文件。

示例1:

<pre>
  This text has
  been formatted using
  the HTML pre tag. The brower should
  display all white space
  as it was entered.
</pre>

示例2:

<pre>
  <code>
    My pre-formatted code
    here.
  </code>
</pre>

示例3: (如果你实际上是在“引用”一段代码,那么标记应该是)

<blockquote>
  <pre>
    <code>
        My pre-formatted "quoted" code here.
    </code>
  </pre>
</blockquote>