如果 HTML 包含空格，则 JQuery HTML 未终止的字符串文字错误

Posted 2023-05-09

【中文标题】如果 HTML 包含空格，则 JQuery HTML 未终止的字符串文字错误

【英文标题】：JQuery HTML Unterminated String Literal Error If HTML Contains Spaces

【发布时间】：2017-02-04 03:08:12

【问题描述】：

通过将其设置为元素的 innerhtml 的一部分，此代码被插入到页面的 HTML 中。它创建了一个类似按钮的跨度，单击该跨度时会打开一个 JQueryUI 窗口，其中包含一些常量文本以及下方的文本“Thiswindow”。

string custom_training_html = "Thiswindow"; // Note this line here.
link = "<span class=\"start_course_button\" onclick=";
link += "javascript:$(\"#temp_test_window\").dialog(minWidth:800,minHeight:600);$(\"#temp_test_custom_html\").html('" + custom_training_html + "');>Test JQueryUI";
link += "</span>\n";

但是，如果我将文本“Thiswindow”更改为“This window”，我会得到：

SyntaxError: unterminated string literal

在此 HTML 中的任何位置出现的空格都会破坏代码。该站点上的其他问题说问题是 HTML 中的换行符，但我认为我没有任何问题。我只是在构建一个包含<span> 代码的字符串，工作版本和非工作版本之间的唯一区别是一个包含空格字符。怎么了？

仅供参考，打开的窗口如下所示：

<div id="temp_test_window" title="Chaucer's Prologue (The Monk)">
    A monk there was, one made for mastery<br />... [snip]
    <div id="temp_test_custom_html">Content Goes Here</div>
</div>

编辑：我已经清理了代码以将 JS 放入它自己的函数中，但这并没有解决问题。在我的主 .aspx 文件中，我有：

function GenerateTestTrainingContent(content)
            
                $('#temp_test_window').dialog(minWidth:800,minHeight:600);
                $('#temp_test_custom_html').html(content);
            
[and later, outside the <script> tags:]
<div id="temp_test_custom_html">Content Goes Here</div>

在 .aspx.cs 文件中，我有这段代码创建一些 HTML 作为“链接”：

link = "<span class='start_course_button' onclick=javascript:GenerateTestTrainingContent('OneWord');>";
link += "Test JQueryUI</span>\n";

这行得通，给我一个链接，它会召唤一个弹出式 JQueryUI 窗口，其中出现文本“OneWord”。但是，如果我在同一代码中将“OneWord”更改为“One Word”，我会得到：

SyntaxError: unterminated string literal
javascript:GenerateTestTrainingContent('One

同样，没有空格 = 有效，任何空格 = 无效。

【问题讨论】：

JavaScript 没有“字符串”变量定义之类的东西，你总是使用关键字“var”来定义这些......

我应该注意到：上面的代码是创建 JS 的 C#。字符串变量是一个 C# 变量。

C# 错误提示字符串未正确终止。但它并没有指出具体的字符串或字符串的一部分。我怀疑您缺少 onclick 属性内容的引号包装器。我还建议将 JS 代码移到它自己的脚本块中以避免混淆。

【参考方案1】：

正如我在评论中提到的，我会将 JS 移动到它自己的 <script> 块中。我还将清理 " 与 ' 的使用，以减少混乱。

string custom_training_html = "This window"; // Note this line here.
string link = "";
link += "<span class='start_course_button'>Test JQueryUI</span>\r\n";
link += "<script>\r\n";
link += "$('#temp_test_window').dialog( autoOpen: false, minWidth:800, minHeight:600 );\r\n";
link += "$('#temp_test_custom_html').html('" + custom_training_html + "');\r\n";
link += "$('.start_course_button').click(function() $('#temp_test_window').dialog('open'); );\r\n";
link += "</script>\r\n";

【讨论】：

将 JS 移动到自己的块中并检查引号的使用是个好主意。但是，我仍然处于没有空格的字符串可以工作，但有空格的字符串不能工作的情况。查看编辑后的帖子。

@Snow 这真的很奇怪，但我认为它与 C# 相关，而不是 JS。我没有 ASP.NET 测试区，所以我无法真正测试问题的那个元素。您可能想要编辑您的帖子，包括有关您正在使用的 .NET Framework 等的详细信息。

@Snow 不能从分离的 JS 代码中调用click 事件吗？为什么要在onclick 属性中运行它？

你也试过编码字符串吗？ link = "<span class='start_course_button' onclick=javascript:GenerateTestTrainingContent('One%20Word');>"; link += "Test JQueryUI</span>\n";