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

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


当前回答

下面是几个答案的组合:

函数c(s) { 返回s.split(“& lt;”). join(“<”).split(“在”). join(“>”).split (", ") . join(“&”) } displayMe。innerHTML = ok.innerHTML; console.log ( c (ok.innerHTML) ) <textarea style="display:none" id="ok"> <脚本> console.log(“hello”,5和9); > < /脚本 textarea > < / < div id = " displayMe " > < / div >

其他回答

你可以试试:

你好!下面是一些代码: < xmp > < div id = "你好" > < / div > < / xmp >

如果你的目标是显示你在同一页面的其他地方执行的代码块,你可以使用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中那样重新格式化。(比如&nbsp;在文本区域中完全删除)

已废弃的<xmp>标记实际上就是这样做的,但它不再是XHTML规范的一部分。尽管它在当前所有浏览器中仍然有效。

这里有另一个想法,一个hack/parlor trick,你可以把代码放在一个文本区域,像这样:

<textarea disabled="true" style="border: none;background-color:white;">
    <p>test</p>
</textarea>

将尖括号和这样的代码放在文本区域内是无效的HTML,在不同的浏览器中会导致未定义的行为。在Internet Explorer中,HTML是解释的,而Mozilla、Chrome和Safari则不解释。

如果你想要它是不可编辑的,看起来不同,那么你可以很容易地使用CSS样式。唯一的问题是浏览器会在右下角添加一个小的拖动句柄来调整方框的大小。或者,尝试使用input标记。

正确的方式注入代码到你的文本区域是使用服务器端语言,比如PHP:

<textarea disabled="true" style="border: none;background-color:white;">
    <?php echo '<p>test</p>'; ?>
</textarea>

然后,它绕过html解释器,并在所有浏览器中一致地将未解释的文本放入文本区域。

除此之外,如果使用静态HTML,唯一的方法是自己转义代码,如果使用这种技术,则使用服务器端方法,如。net的HtmlEncode()。

在HTML ?不。

在XML / XHTML吗?您可以使用CDATA块。

最终,最好的答案(尽管很烦人)是“转义文本”。

然而,有很多文本编辑器——甚至是独立的迷你实用程序——可以自动完成这项工作。所以如果你不想,你永远都不应该手动转义它(除非它是转义和未转义代码的混合…)

快速搜索谷歌会显示这个,例如:http://malektips.com/zzee-text-utility-html-escape-regular-expression.html