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

Question

我有一个应用程序，用户可以在其中编写包含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>

但是，当用户写一个特定的单词，例如“ 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>'));
});

我的问题是，它做得很好，但同时也转换了该注释内的所有可能的HTML标签。

有没有一种方法可以忽略注释中的所有标签，而仅用链接替换“ Cita：＃1”一词并使其起作用？

实际：

预期：

Answer 1

由于您在这里控制了服务器端，因此在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;

输出：

&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;

Answer 2

您需要做的是将文本的匹配部分分开，并将它们作为HTML字符串进行处理，但是对其余文本进行转义*。由于正则表达式匹配项提供了匹配项的索引，因此这样做很容易。

$('.card-text').each(function() {
    var before = "";
    var after = $(this).text();
    var link = "";
    // look for each match in the string
    while (match = after.match(/\b(Cita:#(\d+))\b/i)) {
        // isolate the portion before the match and escape it, this will become the output
        before += $("<div>").text(after.substring(0, match.index)).html();
        // isolate the portion after the match, for use in the next loop
        after = after.substring(match.index + match[1].length);
        // build a link and append it to our eventual output
        before += match[1].replace(/Cita:#(\d+)/i, '<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Cita:#$1</a>');
    }
    // deal with the final bit of the string, which needs to be escaped
    this.innerHTML = before + $("<div>").text(after).html();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body">
 <p class="card-text">
 &lt;span class="foo"&gt;Here is some text. &lt;b&gt;Cita:#1&lt;/b&gt; and &lt;b&gt;Cita:#2&lt;/b&gt;&lt;/span&gt;
 </p>
</div>

---

**我们使用jQuery来构建一个元素，将字符串作为该元素的文本内容传递，最后获得HTML输出：

htmlString = "<div>foo</div>";
console.log(
    $("<div>").text(htmlString).html()
);

输出：

<div>foo</div>