JSFiddle - React, Tailwind, and code Playground

by Trevor Power

HTML

<p>
    <b>Me</b> &amp; &lt;You&gt;
</p>
<h2>four ways...</h2>
<div data-stuff="<b>Me</b> & <You>">Decoded Once</div>
<div data-stuff="<b>Me</b> &amp; &lt;You&gt;">HTML as above</div>
<div data-stuff="&lt;b&gt;Me&lt;/b&gt; &amp;amp; &amp;lt;You&amp;gt;">Encoded Once</div>
<div data-stuff="&amp;lt;b&amp;gt;Me&amp;lt;/b&amp;gt; &amp;amp;amp; &amp;amp;lt;You&amp;amp;gt;">Encoded Twice</div>
<hr/>
<div id='out1'></div>
<hr>
<div id='out2'></div>

JavaScript

$(function(){    
    $("div[data-stuff]").click(function(){
        console.log($(this).data('stuff'));
        $("#out1").html($(this).data('stuff'));
        $("#out2").html($('<div />').html($(this).data('stuff')).text() );
        
    });
});