为什么使用replace对unescape html标签进行脱模也可以去除所有其他html标签？

Question

I need to convert < and > in a table to < and > . The function I'm using to do this works well.

<div class="schedule">    
<table>
      <tbody>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;br /&gt;
            <em>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</em>&lt;br /&gt;Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</td>
        </tr>
      </tbody>
    </table>
</div>

and

$('.table-container td').each(function(){
  var $this = $(this);
  var t = $this.text();
  $this.html(t.replace('&lt','<').replace('&gt', '>'));
});

However, this function also removes the <em> tags that don't need any unescaping. Anyone know why?

https://jsfiddle.net/et1crLug/

Answer 1

Because you used .text() to get your HTML content.

Use .html() instead:

var t = $this.html();

https://jsfiddle.net/et1crLug/1/

Answer 2

Shortcut method using html(function) to replace the each loop

$('.table-container td').html(function(_,existing){
     return existing.replace('&lt;','<').replace('&gt;', '>');
});

DEMO

Answer 3

When you're using replace() i've found it only replaces the first instance. If you use regex you can set it to replace every instance of < and > with /g

https://jsfiddle.net/xdoj0qLy/