将 html 标签显示为文本

Question

我正在为我的网站制作小型 html 编辑器。

我的编辑器

<textarea class="editor"></textarea>

示例窗口

<div class="results"></div>

Javascript 和 JQuery

function textarea_post(){
    var text = $(".editor").val();
    text = text.replace(/<code>/g,"<pre>").replace(/<\/code>/g,"</pre>");
    $(".results").html(text);
}

$(".editor").on("keydown keyup paste",function(e){
    textarea_post();
});

我的代码将编辑器中的<code></code>标签替换为<pre></pre>标签。

问题是你不能在<pre></pre>之间做html代码sn-p。
html代码需要在<pre></pre>之间显示为文本而不是html本身。

<pre></pre>以外的其他标签需要显示为html

Answer 1

我认为你正在尝试做的大部分事情都可以通过 css 来完成；你的 javascript 似乎没问题；但您的 html 需要稍作调整，因为中心标签已弃用且 html 不支持。

看看这个 sn-p 或fiddle（只需在文本区域末尾按回车键）

编辑：已更新以包含来自 Mohit 的更好的脚本，但请注意中心标签！

function textarea_post() {
   var text = $(".editor").val();
    text = text.replace(/<code>/g,"<pre>").replace(/<\/code>/g,"</pre>");
    $(".results").html(text);
    $(".results pre").each(function(){
      var escapedText = $(this).html();
      $(this).text( escapedText );
    });
}

$(".editor").on("keydown keyup paste", function(e) {
 if (e.which==13){
  textarea_post();
  }
});

textarea, .editor {
  width: 80vw;
  height: 150px;
  overflow-y:scroll;
}

h2 {
  text-align: center;
  background-color:white;
  color:darkblue;
  margin-top:0;
  border-bottom:1px #000 dashed;
}
.results{background-color:lightgrey;
width:80vw;
border:1px solid;
overflow-y:scroll;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="editor">
  <h2>Example 1</h2>
  <code>
    function MyFunction(a, b){
     return a+b;
    }
    MyFunction(5, 10)
    <h1>hello</h1>
  </code>


</textarea>

<div class="results"></div>

希望这会有所帮助 - 如果这不是预期的效果/如果我有误解，请发表评论。

Answer 2

试试这个：

function textarea_post(){
    var text = $(".editor").val();
    text = text.replace(/<code>/g,"<pre>").replace(/<\/code>/g,"</pre>");
    $(".results").html(text);
    $(".results pre").each(function(){
      var escapedText = $(this).html();
      $(this).text( escapedText );
    });//
}

$(".editor").on("keydown keyup paste",function(e){
    textarea_post();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<textarea class="editor" rows="15"></textarea>

<div class="results"></div>

Answer 3

尝试添加以下行：

text = text.replace(/</g,"&lt;").replace(/>/g,"&gt;");

这会将< 字符替换为<，这是小于号的HTML 变体。它还将> 字符替换为>，这是大于号的HTML 变体