How to selectively replace text with 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:

miken32 · Accepted Answer · 2019-05-08 19:30:35Z

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;

answered May 8, 2019 at 19:30

miken32

42.5k16 gold badges127 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sociopath Over a year ago

thanks that one worked fine, just created a middleware and replaced the input message like u did

Collectives™ on Stack Overflow

How to selectively replace text with HTML?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related