jQuery的HTML函数不能使用特殊字符

Question

我想将字符串"{<A+_2OF3_MSF}"传递给jQuery的HTML函数。由于特殊字符<，它不起作用。我尝试使用escapeHtml函数对HTML标签进行编码/转义，但之后我面临另一个问题。

var escapeHtml = function(theString) { 
      return theString.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); 
     }; 

其追加HTML编码的字符串文本，而不是HTML。我看到了下面的Stack Overflow帖子，但是之后它建议在编码后解码它。如果我这样做，我会回到原点。

Appending HTML-encoded string as HTML, not as text

我创建了一个小提琴：

https://jsfiddle.net/1aktfzm8/

Answer 1

您需要使用.text()，而不是.html()

$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     $("p").html("<span id=\"span\"> {A+_\"2OF3_MSF\"} </span>"); 
 
     $('#span').text(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Change content of all p elements</button> 
 
<p>This is a paragraph.</p> 
 
<p>This is another paragraph.</p>

Answer 2

此代码工作正常：https://jsfiddle.net/kilotonna/eg4be1gr/1/

$(document).ready(function(){ 
    $("button").click(function(){ 
     $("p").html("{<A+_2OF3_MSF}".replace(/</g, '&lt;')); 
    }); 
});