JavaScript报错Uncaught SyntaxError: Unexpected end of input问题排查

你的语法错误出现在第三行，问题是混淆了模板字符串（反引号`）和普通字符串拼接的语法：

你当前的写法用反引号包裹整个字符串，但里面错误地混入了' + html + '这种普通字符串拼接代码，这不仅会导致变量html无法被正确插入，还会让JavaScript解析器无法识别模板字符串的闭合位置，从而抛出Uncaught SyntaxError: Unexpected end of input错误。

另外还有一个隐性问题：你使用了<、>这类HTML转义字符，这会导致生成的HTML文件里显示转义后的文本（比如<!DOCTYPE html>），而非正确的HTML标签结构。

修复后的代码 #

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

模板字符串支持${变量}的方式直接插入内容，写法更简洁：

$('#saveHTML').click(function() {
    var html = $('#editor').val();
    // 用模板字符串插入变量，使用真实HTML标签而非转义字符
    html = `<!DOCTYPE html><html><head><title>HTML File</title></head><body>${html}</body></html>`;
    var filename = Math.random().toString(36).substr(2, 9);
    var tmpElement = document.createElement('a');
    tmpElement.download = filename + '.html';
    tmpElement.href = 'data:text/html;charset=utf-8,' + encodeURIComponent(html);
    tmpElement.click();
    document.body.removeChild(tmpElement);
    alert('HTML file saved successfully!');
});

方案二：使用普通字符串拼接 #

如果习惯传统拼接方式，把反引号换成单引号即可：

$('#saveHTML').click(function() {
    var html = $('#editor').val();
    // 普通字符串拼接，使用真实HTML标签
    html = '<!DOCTYPE html><html><head><title>HTML File</title></head><body>' + html + '</body></html>';
    var filename = Math.random().toString(36).substr(2, 9);
    var tmpElement = document.createElement('a');
    tmpElement.download = filename + '.html';
    tmpElement.href = 'data:text/html;charset=utf-8,' + encodeURIComponent(html);
    tmpElement.click();
    document.body.removeChild(tmpElement);
    alert('HTML file saved successfully!');
});

内容的提问来源于stack exchange，提问作者Mr.M