转义的 html 在 jquery html 方法中再次未转义

Question

I want to escape a title text in a div. But when feeding the escaped text into html() call, its again un-escaping it. Here is the code

const title = $('<div/>').text('test <script>').html(); // test &amp;lt;script&amp;gt;
const span = `<span title="${title}">Hello world</span>`; // still correct
$('#test').html(span); 

but now the generated html inside #span has again 'test <script'; check the demo here:

 // find elements var banner = $("#banner-message") var button = $("button") // handle click and add class button.on("click", () => { const title = $('<div/>').text('test <script>').html(); const span = `<span title="${title}">Hello world</span>`; $('#test').html(span); })

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #banner-message { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #banner-message.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #banner-message.alt button { background: #fff; color: #000; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="banner-message"> <p id="test">Hello World</p> <button>Add title</button> </div>

1. Click the button add title
2. Hover the element to check the title

Expected: Show title as "test &lt;script&gt;"

Actual: Showing title as "test "

Answer 1

Escape the string a second time.

 function escape_html(str) { return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); } // find elements var banner = $("#banner-message") var button = $("button") // handle click and add class button.on("click", () => { let title = escape_html(escape_html('test <script>')); const span = `<span title="${title}">Hello world</span>`; $('#test').html(span); })

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #banner-message { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #banner-message.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #banner-message.alt button { background: #fff; color: #000; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="banner-message"> <p id="test">Hello World</p> <button>Add title</button> </div>

Answer 2

If you cannot break the script tag, you can escape the tag on the server or in a tag

Note the code here is abusing a deprecated xmp tag to show the issue because you CANNOT have </script> anywhere in your script unless the script is external to the page - so if you plan to show

<script>alert('Hello')</script>

then the page will not load correctly if the above string is not in xmp tags

I have given TWO solutions based on original question and subsequent comment

 $("button").on("click", function() { const $converter = $("<div/>").text($("#textFromServer").text()) // Expected: Show title as "test &lt;script&gt;" $("#test1").prop("title", $converter.html()) // want the title as: "test &amp;lt;script&amp;gt;" $("#test2").prop("title", $converter.html().replace(/&/g, "&amp;")) });

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #banner-message { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #banner-message.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #banner-message.alt button { background: #fff; color: #000; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="banner-message"> <p id="test1">Hello World</p> <p id="test2">Hello World</p> <button>Add title</button> </div> <xmp style="display:none" id="textFromServer">test <script></xmp>