使用 javascript 正则表达式替换时忽略 html 实体

Question

我正在尝试将"a to z"、"&"、数字字符和带有<span>标签的数字包装在一个包含拉丁语和韩语文本混合的列表中，如下所示(简化版本(：

$('li').each(function() {
var replaced_text = $(this).html().replace(/([a-zA-Z ])/g, '<span>$&</span>');
$(this).html(replaced_text)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>&lt;서베이 WRM&gt;, 2019</li>
<li>가나APAP다라 2018</li>
<li>마바사아APAP 20&nbsp;17</li>
<li>WKM마2바사아 20&nbsp;17</li>
</ul>

但目前它也在替换html实体中的字母，例如  > <，例如<变得&<span>l</span><span>t</span>;等等。

因此，根据我的标题，如何在避免 html 实体的同时使用 replace 函数包装这些字符？

Answer 1

检索textContent(或.text()，如果你必须使用 jQuery 方法(可能会更容易，它会将实体解析为显示的字符：

$('li').each(function() {
var replaced_text = $(this).text().replace(/([a-zA-Z ])/g, '<span>$&</span>');
$(this).html(replaced_text)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>&lt;서베이 WRM&gt;, 2019</li>
<li>가나APAP다라 2018</li>
<li>마바사아APAP 20&nbsp;17</li>
<li>WKM마2바사아 20&nbsp;17</li>
</ul>