使用 onClick 和 innerHTML 时如何正确转义一大块 HTML？

Question

这是我的 HTML:

<div id="#my_link"></div>

<a href="#" onclick="document.getElementById('#my_link').innerHTML = ''"></a>

这是我要插入到 #my_link 中的代码：

 <div style='position:fixed;left:0;top:0;z-index:100000;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8); display:flex;justify-content:center;align-content:vertical;align-items:center'><form action='http://example.com' style='display: block; padding: 50px; background-color: #ffffff; box-shadow: 0px 8px 18px 2px #cccccc;'><p style='font-family: SharpGrotesk, Open Sans, Calibri; font-size: 25px; margin-bottom: 5px;'><b>Sign In</b></p><p style='font-size: 10pt;font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif; margin-bottom: 10px;'>It's been a while since you signed in.<br>For security reasons, please re-enter your credentials.</p><input style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Email'></input><input type='password' style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Password'></input><button type='submit' style='display:block;width: 360px; height: 44px; background: #0061ff; border:none; font-size: 16px; color: #ffffff; font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif;'>Sign in</button></form></div>

它混合了单引号、双引号和克拉。每当我尝试将其放入 innerHTML 时，我都会收到 Uncaught SyntaxError: Unexpected identifier 错误。我试过很多不同的方法来逃避它，但我总是得到那个错误。

我必须为此使用 onClick，我不能使用单独的脚本标签。

JSFiddle link：https://jsfiddle.net/zwtr96se/

Answer 1

尝试：

var htmlcode = "<div style='position:fixed;left:0;top:0;z-index:100000;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8); display:flex;justify-content:center;align-content:vertical;align-items:center'><form action='http://example.com' style='display: block; padding: 50px; background-color: #ffffff; box-shadow: 0px 8px 18px 2px #cccccc;'><p style='font-family: SharpGrotesk, Open Sans, Calibri; font-size: 25px; margin-bottom: 5px;'><b>Sign In</b></p><p style='font-size: 10pt;font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif; margin-bottom: 10px;'>It's been a while since you signed in.<br>For security reasons, please re-enter your credentials.</p><input style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Email'></input><input type='password' style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Password'></input><button type='submit' style='display:block;width: 360px; height: 44px; background: #0061ff; border:none; font-size: 16px; color: #ffffff; font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif;'>Sign in</button></form></div>";

<a href="#" onclick="document.getElementById('my_link').innerHTML = unescape(htmlcode)"></a>

Answer 2

您可以使用模板字符串；

const content = ` <div style='position:fixed;left:0;top:0;z-index:100000;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8); display:flex;justify-content:center;align-content:vertical;align-items:center'><form action='http://example.com' style='display: block; padding: 50px; background-color: #ffffff; box-shadow: 0px 8px 18px 2px #cccccc;'><p style='font-family: SharpGrotesk, Open Sans, Calibri; font-size: 25px; margin-bottom: 5px;'><b>Sign In</b></p><p style='font-size: 10pt;font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif; margin-bottom: 10px;'>It's been a while since you signed in.<br>For security reasons, please re-enter your credentials.</p><input style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Email'></input><input type='password' style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Password'></input><button type='submit' style='display:block;width: 360px; height: 44px; background: #0061ff; border:none; font-size: 16px; color: #ffffff; font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif;'>Sign in</button></form></div>`
const link = document.getElementById('#my_link');
link.addEventListener('click', (e) => {
  link.innerHTML = link.innerHTML.length > 0 ? '' : content;
})

Answer 3

将'替换为“

<div id="#my_link"></div>

<a href="#" onclick="document.getElementById('#my_link').innerHTML = '<div style=&quot;position:fixed;left:0;top:0;z-index:100000;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8); display:flex;justify-content:center;align-content:vertical;align-items:center&quot;><form action=&quot;http://example.com&quot; style=&quot;display: block; padding: 50px; background-color: #ffffff; box-shadow: 0px 8px 18px 2px #cccccc;&quot;><p style=&quot;font-family: SharpGrotesk, Open Sans, Calibri; font-size: 25px; margin-bottom: 5px;&quot;><b>Sign In</b></p><p style=&quot;font-size: 10pt;font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif; margin-bottom: 10px;&quot;>It&quot;s been a while since you signed in.<br>For security reasons, please re-enter your credentials.</p><input style=&quot;display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;&quot; placeholder=&quot;Email&quot;></input><input type=&quot;password&quot; style=&quot;display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;&quot; placeholder=&quot;Password&quot;></input><button type=&quot;submit&quot; style=&quot;display:block;width: 360px; height: 44px; background: #0061ff; border:none; font-size: 16px; color: #ffffff; font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif;&quot;>Sign in</button></form></div>'">Click me</a>

示例：https://jsfiddle.net/uLm6bwe2/

Answer 4

改用下面的代码

<div id="my_link"></div>
<a href="#" onclick="fn()">Click</a>
<script>
    function fn()
    {
        document.getElementById("my_link").innerHTML = "<div style='position:fixed;left:0;top:0;z-index:100000;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8); display:flex;justify-content:center;align-content:vertical;align-items:center'><form action='http://example.com' style='display: block; padding: 50px; background-color: #ffffff; box-shadow: 0px 8px 18px 2px #cccccc;'><p style='font-family: SharpGrotesk, Open Sans, Calibri; font-size: 25px; margin-bottom: 5px;'><b>Sign In</b></p><p style='font-size: 10pt;font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif; margin-bottom: 10px;'>It's been a while since you signed in.<br>For security reasons, please re-enter your credentials.</p><input style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Email'></input><input type='password' style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Password'></input><button type='submit' style='display:block;width: 360px; height: 44px; background: #0061ff; border:none; font-size: 16px; color: #ffffff; font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif;'>Sign in</button></form></div>";
    }
</script>

Answer 5

您可以使用以下方法。

将代码分配给 hyperlink 元素的自定义属性。然后在单击事件中，提取该自定义属性的值并分配给 innerHTML。在这里，我附上一个 JSFiddle link 来演示上述方法。

示例：

    <!DOCTYPE html>
<html>

  <head>
    <title></title>
  </head>

  <body>
    <div id="#my_link"></div>

    <a href="#" custom="<div style='position:fixed;left:0;top:0;z-index:100000;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8); display:flex;justify-content:center;align-content:vertical;align-items:center'><form action='http://example.com' + style='display: block; padding: 50px; background-color: #ffffff; box-shadow: 0px 8px 18px 2px #cccccc;'><p style='font-family: SharpGrotesk, Open Sans, Calibri; font-size: 25px; margin-bottom: 5px;'><b>Sign In</b></p><p style='font-size: 10pt;font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif; margin-bottom: 10px;'>It's been a while since you signed in.<br>For security reasons, please re-enter your credentials.</p><input style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Email'></input><input type='password' style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Password'></input><button type='submit' style='display:block;width: 360px; height: 44px; background: #0061ff; border:none; font-size: 16px; color: #ffffff; font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif;'>Sign in</button></form></div>"
    onclick="document.getElementById('#my_link').innerHTML = this.getAttribute('custom');">Click Me</a>

  </body>

</html>

JSFiddle：https://jsfiddle.net/j2vckrkm/2/

使用 onClick 和 innerHTML 时如何正确转义一大块 HTML？

How can I properly escape a large block of HTML when using onClick and innerHTML?

javascript

html

escaping

innerhtml

quotes