为何JavaScript会将HTML实体'识别为单引号，导致函数调用报错？

阿华AIGC实验室

2026-4-8

嘿，这个坑我之前踩过好多次，太懂你看到控制台报错时的崩溃了！

你猜的完全没错——浏览器在渲染页面的时候，会把HTML实体'自动解析成真实的单引号（'）。如果你的函数调用是直接写在HTML的onclick属性里的，比如原来的代码可能是类似这样：

<tr onclick="handleRowClick('这行内容里有&#39;单引号&#39;')">...</tr>

当浏览器解析后，这行HTML的onclick实际会变成：

handleRowClick('这行内容里有'单引号'')

你看，中间的单引号直接把参数的字符串给提前闭合了！JavaScript解析器看到这里，就会觉得函数的参数列表没写完，自然就抛出“Uncaught SyntaxError: missing ) after argument list”的错误。而"是双引号，如果你用单引号包裹参数的话，双引号不会破坏单引号的闭合，所以就不会报错，这就是为什么另一种情况正常的原因。

那怎么解决这个问题呢？给你几个实用的办法：

首选：用事件委托代替内联onclick
把HTML和JavaScript代码完全分开，不要在标签里写函数调用。比如给整个表格加一个点击事件监听，然后通过事件对象找到被点击的行，再从行里取数据：

// 给表格绑定点击事件
document.querySelector('your-table-selector').addEventListener('click', function(e) {
  // 找到被点击的表格行
  const targetRow = e.target.closest('tr');
  if (!targetRow) return;
  
  // 从行的data属性里拿数据，这里的data-content可以存任何内容
  const rowData = targetRow.dataset.content;
  // 调用你的处理函数
  handleRowClick(rowData);
});

对应的HTML行可以写成：

<tr data-content="这里随便写'单引号'或者&quot;双引号&quot;都没问题">...</tr>

这种方式完全避免了字符串闭合的问题，而且代码维护起来也更方便。

如果非要用内联事件：转义特殊字符
如果你因为某些原因必须用内联的onclick，那得在输出HTML的时候把数据里的单引号转义成\'，或者用双引号包裹函数参数，同时把数据里的双引号转义。比如后端生成HTML时，把'替换成\\'，这样解析后JS里的字符串就会是'这行内容里有\'单引号\''，就不会破坏闭合了。不过这种方式容易漏转义，还是事件委托更稳妥。
用JSON序列化处理
还可以把数据转成JSON字符串，然后在JS里解析。比如后端把数据序列化成JSON，然后内联写成：
```
<tr onclick="handleRowClick(JSON.parse('${JSON.stringify(rowData)}'))">...</tr>
```
JSON.stringify会自动处理特殊字符，不过要注意后端输出时的转义，避免出现语法错误。