使用JQuery+Socket.io替换HTML表格时触发Uncaught SyntaxError错误，如何修复？

这个语法错误的根源很明确：JavaScript不允许用普通的单引号或双引号直接包裹跨多行的字符串。你在replaceWith()方法里直接用单引号写了多行HTML代码，这就违反了JS的语法规则，导致抛出Invalid or unexpected token错误。

给你两种可行的修复方案：

方案1：使用ES6模板字符串（推荐） #

模板字符串用反引号（`）包裹，天生支持多行书写，代码可读性极高，是现在最常用的方式。修改后的代码如下：

socket.on('resetGranted', function() {
    $('table').replaceWith(`<table>
            <tbody>
                <tr>
                    <td class="1"></td>
                    <td class="2"></td>
                    <td class="3"></td>
                </tr>
                <tr>
                    <td class="4"></td>
                    <td class="5"></td>
                    <td class="6"></td>
                </tr>
                <tr>
                    <td class="7"></td>
                    <td class="8"></td>
                    <td class="9"></td>
                </tr>
            </tbody>
        </table>`);
})

方案2：兼容旧环境的字符串拼接 #

如果需要兼容不支持ES6的老旧浏览器，可以把多行字符串拆成单行，用+拼接起来，或者在每行末尾添加转义符\（注意转义符后面不能有任何空格）。这里用拼接的方式示例：

socket.on('resetGranted', function() {
    $('table').replaceWith('<table>' +
            '<tbody>' +
                '<tr>' +
                    '<td class="1"></td>' +
                    '<td class="2"></td>' +
                    '<td class="3"></td>' +
                '</tr>' +
                '<tr>' +
                    '<td class="4"></td>' +
                    '<td class="5"></td>' +
                    '<td class="6"></td>' +
                '</tr>' +
                '<tr>' +
                    '<td class="7"></td>' +
                    '<td class="8"></td>' +
                    '<td class="9"></td>' +
                '</tr>' +
            '</tbody>' +
        '</table>');
})

另外提个小细节：你原来的HTML里<tbody>标签是先闭合再写内容，虽然浏览器会自动修正这个不规范的写法，但上面的修复代码已经把它改成了先开启<tbody>再写行内容、最后闭合的标准格式，这样更符合HTML规范。

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