如何在网页上显示HTML片段,而不需要将每个<替换为<>和>?
换句话说,是否有一个标记表示在点击结束标记之前不呈现HTML ?
如何在网页上显示HTML片段,而不需要将每个<替换为<>和>?
换句话说,是否有一个标记表示在点击结束标记之前不呈现HTML ?
当前回答
在HTML中有几种方法可以转义所有内容,但都不是很好。
或者你可以放入一个iframe来加载一个普通的旧文本文件。
其他回答
在HTML中有几种方法可以转义所有内容,但都不是很好。
或者你可以放入一个iframe来加载一个普通的旧文本文件。
已弃用,但适用于FF3和IE8。
<xmp>
<b>bold</b><ul><li>list item</li></ul>
</xmp>
推荐:
<pre><code>
code here, escape it yourself.
</code></pre>
JavaScript字符串文字可以用于跨多行编写HTML。显然,这个解决方案需要JavaScript,特别是ECMA6。
.createTextNode with CSS white-space: pre-wrap;很管用。
. innertext单独也可以。运行下面的代码片段。
let codeBlock = ` <!DOCTYPE HTML> <html lang="en"> <head> <title>My Page</title> </head> <body> <h1>Welcome to my page</h1> <p>I like cars and lorries and have a big Jeep!</p> <h2>Where I live</h2> <p>I live in a small hut on a mountain!</p> </body> </html> ` const codeElement = document.querySelector("#a"); let textNode = document.createTextNode(codeBlock); codeElement.appendChild(textNode); const divElement = document.querySelector("#b"); divElement.innerText = codeBlock; #a { white-space: pre-wrap; } <div id=a> </div> <div id=b> </div>
这是一种hack,但是我们可以使用类似的东西:
正文脚本{ 显示:块; 字体类型:等宽字体; 空白:前; } <脚本type = " text / html " > <标题> Hello World h1 > < / < ul > <li>享受这个狡猾的黑客, <李>或不! < / ul > > < /脚本
使用该CSS,浏览器将在主体中显示脚本。它不会尝试执行这个脚本,因为它有一个未知的类型text/html。在<script>中没有必要转义特殊字符,除非你想包含一个结束</script>标记。
我正在使用类似这样的东西在页面主体中显示可执行的JavaScript,这是一种“有文化的编程”。
在这个问题中还有更多的信息,标签什么时候应该可见,为什么可以?
如果你的目标是显示你在同一页面的其他地方执行的代码块,你可以使用textContent(它是纯js和良好的支持:http://caniuse.com/#feat=textcontent)
<div id="myCode">
<p>
hello world
</p>
</div>
<div id="loadHere"></div>
document.getElementById("myCode").textContent = document.getElementById("loadHere").innerHTML;
要在结果中获得多行格式,您需要在目标div上设置css样式“white-space: pre;”,并在每一行的末尾使用“\r\n”单独写入行。
这里是一个演示:https://jsfiddle.net/wphps3od/
与使用textarea相比,这种方法有一个优点:代码不会像在textarea中那样重新格式化。(比如 在文本区域中完全删除)