Question

在堆栈溢出时，您可以使用ctrl k使HTML看起来像HTML而不是它的输出。

类似

<div>
    <p>Hello world</p>
</div>

而不是Hello World

我检查了网页，它就像这样出现了

<pre>
  <code>
    &lt;div&gt;
    &lt;p&gt;Hello world&lt;/p&gt;
    &lt;/div&gt;
  </code>
</pre>

我正在开展一个我想做类似事情的项目。我假设它使用了一些javascript函数来执行此操作，但我不确定，有人知道这是如何工作的吗？

Answer 1

如果您支持PHP，可以使用函数htmlentities()。

Answer 2

在JavaScript中，您可以使用string.replace()来实现相同目标。

例如：

var string = '<h1> Hello </h1>'
console.log(string.replace(/</g, '&lt;').replace(/>/g, '&gt;'));
// "&lt;h1&gt; Hello &lt;/h1&gt;"

Answer 3

你是正确的，HTML必须进行Html编码才能看到括号。＆lt;符号编码为＆amp; lt; （小于），而＆gt;符号编码为＆amp; gt; （大于）。

所以问题是如何自动完成，而不必记住这样做。

您可能需要查看语法高亮显示器：

语法荧光笔：http://alexgorbatchev.com/SyntaxHighlighter/

你也可以使用字符串替换并编写自己的函数，如sarbbottam建议的那样。

Answer 4

你可以试试这个：

function preIt(code){
    code = code.replace(/[&<>]/g, function(tag){
        return {'<' : '&lt;', '>' : '&gt;', '&' : '&amp;'}[tag];
    });
    return "<pre>"+code+"</pre>";
}

用法：

document.write(preIt("<div><p>Hello world!</p></div>"));

该函数将HTML代码作为输入，然后对代码执行RegEx替换。它使用回调函数将匹配的字符替换为相应的HTML entity code。

或者，您可以实施code in this answer。

Answer 5

当您在<textarea>元素中选择行时，StackOverflow仅使用4个空格移动选定的行，然后将其用作可通过JavaScript检测的标记。它看起来像下面这样：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<textarea id="myTextarea" style="width:500px;height:400px;"></textarea>
<button id="clickme">Click me!</button>

<script>
    $('#clickme').on('click', function() {
        var value = document.getElementById("myTextarea").value.replace(/(\n|^)[ ]{4}([^\n]*)/g, function(c) {
            // console.log('found! c ==', c, '; arguments ==', arguments);

            var lineData = arguments[2];

            return "<pre><code>" + lineData.replace(/</g, '&lt;').replace(/>/g, '&gt;') + "</code></pre>";
        });

        // console.log('value ==', value);

        $('body').append(value);
    });
</script>

在<textarea>地方文字中，如下所示，确保在每行需要格式化为可显示的HTML之前有4个空格：

<div>
    Hello world!<br />
</div>

然后最后点击“点击我！”按钮。为简洁起见，在此代码示例中使用了jQuery。

Answer 6

所以我最终使用jquery的.html（）方法来格式化html

$( "p" ).click(function() {
  var htmlString = $( this ).html();
  $( this ).text( htmlString );
});

这里是文档 http://api.jquery.com/html/

和小提琴 http://jsfiddle.net/arh6E/

使HTML看起来像网页上的HTML

6 个答案: