Question

我有一个Ordered列表，其中包含一个名为comments的类。
所以我将文本区域的值推送到名为 my_html_syntax 的变量。

代码工作正常唯一的问题是我如何停止渲染html语法例如，当我为buttton输入html语法时，它会将按钮渲染到我的ul。

如何逃避我的javascript变量my_html_syntax

已解决 - 感谢Justinas这就是我如何使用它。

<html>

<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-    2.1.1.min.js"></script>

<script>

$(document).ready(function() {

$('button').click(function() {
function htmlEntities(str) {
 return String(str).replace(/&/g,'&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

var my_html_syntax= $('#textarea').val(); 

$('ul').append('<li>' + htmlEntities(my_html_syntax) +'</li>');


   });
      });

 </script>

</head>
<body>
<textarea id="textarea" class="textarea" rows="4" cols="50"> </textarea>

<button class="doit" id="doit" type="button" value="submit">   submit</button>

<ul class="comments" id="comments">  asd </ul>

</body>

  </html>

Answer 1

您可以转义要显示的HTML实体：

function htmlEntities(str) {
  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

$(document).ready(function() {
  $('ul').append("<li>" + htmlEntities("<a href='example.com'>LINK</a>") + "</li>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul></ul>

Source

Answer 2

糟糕的方式。

您必须使用.text()。

$("<li></li>")
    .text(my_html_syntax)
    .appendTo($('.comments'));

或.append()：

$('.comments').append($("<li></li>").text(my_html_syntax));

Jquery停止渲染Html语法转义javascript变量

2 个答案: