Javascript 如何有选择地用HTML替换文本？

我有一个应用程序，用户可以在其中编写包含HTML代码的注释，该代码在显示之前转义：

<div class="card-body">
 <p class="card-text">
  &lt;h1&gt;HOLA&lt;/h1&gt; Cita:#2&lt;h1&gt;HOLA&lt;/h1&gt; &lt;h1&gt;HOLA&lt;/h1&gt; Cita:#6&lt;h1&gt;HOLA&lt;/h1&gt; &lt;h1&gt;HOLA&lt;/h1&gt; 
 </p>
</div>

h1HOLA/h1cita:#2h1HOLA/h1HOLA/h1cita:#6h1HOLA/h1HOLA/h1

但是，当用户编写一个特定的单词（如“Cita:#1”）时，我想用jQuery将其转换为链接，因此稍后我可以在那里加载一个Ajax弹出窗口，其中包含以下代码：

$('.card-text').each(function() {
    $(this).html($(this).text().replace(/Cita:#(\d+)/ig, '<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Cita:#$1</a>'));
});

$（'.card text'）。每个（函数（）{
$（this）.html（$（this）.text（）.replace（/Cita:#（\d+）/ig，）；
});

我的问题是，它做得很好，但也转换了注释中所有可能的HTML标记

有没有一种方法可以忽略评论中的所有标记，只使用链接替换单词“Cita:#1”并使其正常工作

实际：

预期：

---

您需要做的是分离文本的匹配部分，并将它们作为HTML字符串处理，但转义*文本的其余部分。因为正则表达式匹配提供了匹配的索引，所以这很容易做到

$（'.card text'）。每个（函数（）{
前var=”；
var after=$（this.text（）；
var link=“”；
//查找字符串中的每个匹配项
while（match=after.match（/\b（Cita:#（\d+））\b/i））{
//在匹配之前隔离部分并转义，这将成为输出
before+=$（“”）.text（before.substring（0，match.index））.html（）；
//隔离匹配后的部分，以便在下一个循环中使用
after=after.substring（match.index+match[1].长度）；
//建立一个链接并将其附加到最终输出中
在+=匹配[1]之前。替换（/Cita:#（\d+）/i，）；
}
//处理需要转义的字符串的最后一位
this.innerHTML=before+$（“”）.text（before）.html（）；
});


span class=“foo”这里是一些文本。bCita:#1/b和bCita:#2/b/span

由于您可以在这里控制服务器端，因此在PHP中执行此操作要容易得多：

$string = '<h1>HOLA</h1> Cita:#2<h1>HOLA</h1> <h1>HOLA</h1> Cita:#6<h1>HOLA</h1> <h1>HOLA</h1>';
$string = htmlspecialchars($string);
$string = preg_replace(
    '/Cita:#(\\d+)/i',
    '<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Cita:#$1</a>',
    $string
);
echo $string;

$string='HOLA-Cita:#2HOLA-HOLA-Cita:#6HOLA-HOLA'；
$string=htmlspecialchars（$string）；
$string=preg\u replace(
“/Cita:#（\\d+）/i”，
'',
$string
);
echo$字符串；

输出：

&lt;h1&gt;HOLA&lt;/h1&gt; <a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Cita:#2</a>&lt;h1&gt;HOLA&lt;/h1&gt; &lt;h1&gt;HOLA&lt;/h1&gt; <a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Cita:#6</a>&lt;h1&gt;HOLA&lt;/h1&gt; &lt;h1&gt;HOLA&lt;/h1&gt;

h1HOLA/h1HOLA/h1h1hola/h1h1hola/h1h1hola/h1
Hi，如果你只写了一个Cita:#，你的解决方案就行了，但是如果用户写了多个Cita:#就不行了。请用所需信息编辑你的问题，我会看看是否可以再看一看。如果有人要求你输入示例，你应该以文本而不是屏幕截图的形式提供。只需在浏览器中查看源代码并复制/粘贴相关文本。无论如何，请看新的编辑…感谢它工作得很好，只是创建了一个中间件，并像u一样替换了输入消息