「JavaScript シングルクォートのエスケープ」の版間の差分

2020年2月15日 (土) 08:03時点における版

innerHTML を利用して動的にinput タグを生成する場合等、以下のように(value=)しシングルクォートを利用するが、

xx.innerHTML = "<input type='text' value='" + val + "'/>";

この場合、valにシングルクォートが含まれる場合、正しく動作しない。ダブルクォートを使用(value=\"\")し、" に置き換えることで、シングルクォート、ダブルクォートともに正しく扱うことができる(本来は、引用符以外のHTML特殊文字も置き換えるべき)

xx.innerHTML = "<input type='text' value=\"" + val.replace(/"/i, """)+ "\"/>";

@@ 1行目: / 1行目: @@
 ==シングルクォートのエスケープ==
 innerHTML を利用して動的にinput タグを生成する場合等、以下のように(value='')しシングルクォートを利用するが、
-  xx.innerHTML = "<input type='text' value='" + val + "'/>";
+  xx.innerHTML = "&lt;input type='text' value='" + val + "'/&gt;";
 この場合、valにシングルクォートが含まれる場合、正しく動作しない。
 ダブルクォートを使用(value=\"\")し、&quot; に置き換えることで、シングルクォート、ダブルクォートともに正しく扱うことができる(本来は、引用符以外のHTML特殊文字も置き換えるべき)
-  xx.innerHTML = "<input type='text' value=\"" + val.replace(/"/i, "&quot;")+ "\"/>";
+  xx.innerHTML = "&lt;input type='text' value=\"" + val.replace(/"/i, "&quot;")+ "\"/&gt;";
 {{ref quote_escape.lzh}}