将 html 个标签显示为文本

Question

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

我的编辑

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

例子window

<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

尝试添加以下行：

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

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

的 HTML 变体

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

我想你想做的大部分事情都可以通过css来完成；您的 javascript 似乎没问题；但是您的 html 需要稍作调整，因为 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>

希望这对您有所帮助 - post 如果这不是您想要的，请发表评论 effect/if 我误解了。

将 html 个标签显示为文本

Show html tags as a text

html

javascript

jquery

editor