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

Question

I have an application where users can write comments containing HTML code, which is escaped before displaying:

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

But when a user write a specific word like "Cita:#1" I want to transform it with jQuery to a link, so later I can load an Ajax popup there with this code:

$('.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>'));
});

My problem is that it does it well but also transform all possible HTML tags inside that comment too.

Is there a way to just ignore all tags that can be inside the comment and only replace the word "Cita:#1" with a link and made it works?

Actual:

Expected:

Answer 1

Since you control the server-side here, this would be much easier to do in 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;

Output:

&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

What you need to do is separate the matching parts of the text and process them as HTML strings, but escape* the rest of the text. Since regular expression matches provide the index of the match, this is easy enough to do.

 $('.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> 

---

*We use jQuery to build an element, pass the string as the text content of that element, and finally get the HTML output:

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

Output:

<div>foo</div>