JavaScript中的转义：如何让<a href='javascript:func("Jack'S Birthday")'>Jack's Birthday</a>正常工作？

嘿，这个单引号嵌套导致的代码解析问题我碰到好多次了，咱们一步步来把它修好！

首先得搞清楚问题出在哪：你的代码里<a>标签的href属性用单引号'包裹了JavaScript代码，而函数func的参数里又出现了Jack'S这个带单引号的字符串——浏览器会把这个单引号当成href属性的结束标记，直接导致后面的代码解析失败。

下面给你几种可行的解决方案：

• 转义冲突的单引号
  在单引号包裹的字符串里，用反斜杠\转义内部的单引号，这样浏览器就不会误把它当成属性的结束符了。修改后的代码如下：

  <a href='javascript:func("Jack\'S Birthday")'>Jack's Birthday</a>
  

• 更换属性的包裹引号
  把href属性的单引号换成双引号，同时调整函数参数的引号（或者转义双引号），比如：

  <!-- 参数用单引号，内部单引号转义 -->
  <a href="javascript:func('Jack\'s Birthday')">Jack's Birthday</a>
  <!-- 或者用HTML实体代替双引号 -->
  <a href="javascript:func(&quot;Jack's Birthday&quot;)">Jack's Birthday</a>
  

  这里的"是双引号的HTML实体，能有效避免引号嵌套冲突。

• 推荐：使用事件监听替代href中的JavaScript
  直接在href里写JS代码不仅容易出转义问题，也不利于代码维护。更规范的做法是用onclick事件，同时阻止默认跳转行为：

  <a href="#" onclick="func('Jack\'s Birthday'); return false;">Jack's Birthday</a>
  

  如果是更复杂的场景，还可以用JavaScript单独绑定事件，不过上面的写法在静态HTML里已经足够好用了。

总结一下：核心就是避免引号的嵌套冲突，要么转义内部的冲突引号，要么更换外层的包裹引号，最好的方式是把JS逻辑和HTML属性分离，减少这类问题的发生。

内容的提问来源于stack exchange，提问作者jforex78