javascript - 将 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 代码片段.
HTML 代码需要在 <pre></pre> 之间显示为文本而不是 html 本身.

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

Answer 1

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

看看这个片段或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>

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