{"id":3043,"date":"2025-06-17T13:57:59","date_gmt":"2025-06-17T13:57:59","guid":{"rendered":"https:\/\/designersgate.com\/blog\/?p=3043"},"modified":"2025-06-17T18:36:30","modified_gmt":"2025-06-17T18:36:30","slug":"escaping-html-in-js-shouldnt-be-painful-but-it-is","status":"publish","type":"post","link":"https:\/\/designersgate.com\/blog\/escaping-html-in-js-shouldnt-be-painful-but-it-is\/","title":{"rendered":"Escaping HTML in JS shouldn&#8217;t be painful&#8230; but it is."},"content":{"rendered":"\n<p>JavaScript doesn&#8217;t have a direct equivalent to PHP&#8217;s&nbsp;<code>htmlentities<\/code>&nbsp;function, which converts characters to their HTML entities to prevent issues like XSS (Cross-Site Scripting). However, JavaScript does have ways to safely handle strings for insertion into the DOM.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1.&nbsp;<strong>Using&nbsp;<code>textContent<\/code>&nbsp;or&nbsp;<code>innerText<\/code><\/strong><\/h3>\n\n\n\n<p>When you use&nbsp;<code>innerText<\/code>&nbsp;or&nbsp;<code>textContent<\/code>&nbsp;to insert a string into the DOM, the browser automatically escapes any HTML-like characters, making it safe. For example:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>const element = document.getElementById(&#8216;example&#8217;);\nelement.textContent = &#8216;&lt;script>alert(&#8220;XSS&#8221;)&lt;\/script>&#8217;;<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">const element <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> document.getElementById<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">example<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">element.textContent <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">&lt;script&gt;alert(&quot;XSS&quot;)&lt;\/script&gt;<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This will display the string as-is (<code>&lt;script&gt;alert(\"XSS\")&lt;\/script&gt;<\/code>) in the browser, without executing the script.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2.&nbsp;<strong>Manually Escaping HTML<\/strong><\/h3>\n\n\n\n<p>If you need to escape a string manually (e.g., for use in attributes or other contexts), you can create a utility function:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>function escapeHTML(str) {\n    const div = document.createElement(&#8216;div&#8217;);\n    div.textContent = str;\n    return div.innerHTML;\n}\n\n\/\/ Example usage:\nconst safeString = escapeHTML(&#8216;&lt;script>alert(&#8220;XSS&#8221;)&lt;\/script>&#8217;);\nconsole.log(safeString);\n\/\/ Outputs: &lt;script>alert(&#8220;XSS&#8221;)&lt;\/script><\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">escapeHTML<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9FF\">str<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    const div <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> document.createElement<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">div<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    div.textContent <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> str<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> div.innerHTML<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">\/\/<\/span><span style=\"color: #D8DEE9FF\"> Example usage:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">const safeString <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> escapeHTML<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">&lt;script&gt;alert(&quot;XSS&quot;)&lt;\/script&gt;<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">console.log<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9FF\">safeString<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">\/\/<\/span><span style=\"color: #D8DEE9FF\"> Outputs: <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #D8DEE9FF\">script<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">alert<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">XSS<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">&lt;\/<\/span><span style=\"color: #D8DEE9FF\">script<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This approach uses the browser&#8217;s built-in escaping mechanism by leveraging a temporary DOM element.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3.&nbsp;<strong>Avoid&nbsp;<code>encodeURIComponent<\/code>&nbsp;or&nbsp;<code>encodeURI<\/code><\/strong><\/h3>\n\n\n\n<p>As you mentioned,&nbsp;<code>encodeURIComponent<\/code>&nbsp;and&nbsp;<code>encodeURI<\/code>&nbsp;are not suitable replacements for&nbsp;<code>htmlentities<\/code>. These functions are designed for encoding strings for use in URLs, not for escaping HTML. For example:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>const urlSafe = encodeURIComponent(&#8216;&lt;script>alert(&#8220;XSS&#8221;)&lt;\/script>&#8217;);\nconsole.log(urlSafe);\n\/\/ Outputs: %3Cscript%3Ealert(%22XSS%22)%3C%2Fscript%3E<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">const urlSafe <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> encodeURIComponent<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">&lt;script&gt;alert(&quot;XSS&quot;)&lt;\/script&gt;<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">console.log<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9FF\">urlSafe<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">\/\/<\/span><span style=\"color: #D8DEE9FF\"> Outputs: <\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">3Cscript<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">3Ealert<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">22XSS<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #B48EAD\">22<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">3C<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">2Fscript<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #B48EAD\">3E<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This is useful for URLs but won&#8217;t help with safely displaying content in the DOM.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Summary<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use&nbsp;<code>textContent<\/code>&nbsp;or&nbsp;<code>innerText<\/code>&nbsp;for safe DOM insertion.<\/li>\n\n\n\n<li>Use a custom&nbsp;<code>escapeHTML<\/code>&nbsp;function for manual escaping.<\/li>\n\n\n\n<li>Avoid using&nbsp;<code>encodeURIComponent<\/code>&nbsp;for HTML escaping\u2014it serves a different purpose.<\/li>\n<\/ul>\n\n\n\n<p>Hope this is a great help to you guys. If you know of a simpler way to do this, leave your comment below, I see you in the next project.<\/p>\n\n\n\n<p>Remember to follow us in <a href=\"https:\/\/www.facebook.com\/designers.gate\/\">Facebook<\/a>, <a href=\"https:\/\/www.youtube.com\/@designersgate2518\">YouTube<\/a>, <a href=\"https:\/\/x.com\/designersgate\">X<\/a>, <a href=\"https:\/\/truthsocial.com\/@designersgate\">Truth Social<\/a> and <a href=\"https:\/\/gettr.com\/user\/designers_gate\">Gtter<\/a>. Stop by and say &#8220;Hi&#8221;.<\/p>\n\n\n\n<p>Happy Coding and Happy Designing&#8230; Designer&#8217;s Gate out.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript doesn&#8217;t have a direct equivalent to PHP&#8217;s&nbsp;htmlentities&nbsp;function, which converts characters to their HTML entities to prevent issues like XSS (Cross-Site Scripting). However, JavaScript does have ways to safely handle strings for insertion into the DOM. 1.&nbsp;Using&nbsp;textContent&nbsp;or&nbsp;innerText When you use&nbsp;innerText&nbsp;or&nbsp;textContent&nbsp;to insert a string into the DOM, the browser automatically escapes any HTML-like characters, making it [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3044,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-3043","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"acf":[],"jetpack_featured_media_url":"https:\/\/designersgate.com\/blog\/wp-content\/uploads\/2025\/06\/Copilot_JS_complication.webp","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/designersgate.com\/blog\/wp-json\/wp\/v2\/posts\/3043","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designersgate.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/designersgate.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/designersgate.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designersgate.com\/blog\/wp-json\/wp\/v2\/comments?post=3043"}],"version-history":[{"count":4,"href":"https:\/\/designersgate.com\/blog\/wp-json\/wp\/v2\/posts\/3043\/revisions"}],"predecessor-version":[{"id":3053,"href":"https:\/\/designersgate.com\/blog\/wp-json\/wp\/v2\/posts\/3043\/revisions\/3053"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/designersgate.com\/blog\/wp-json\/wp\/v2\/media\/3044"}],"wp:attachment":[{"href":"https:\/\/designersgate.com\/blog\/wp-json\/wp\/v2\/media?parent=3043"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/designersgate.com\/blog\/wp-json\/wp\/v2\/categories?post=3043"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/designersgate.com\/blog\/wp-json\/wp\/v2\/tags?post=3043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}