jQuery + 客户端模板 =“语法错误，无法识别的表达式”答案

【问题标题】：jQuery + client-side template = "Syntax error, unrecognized expression"jQuery + 客户端模板 =“语法错误，无法识别的表达式”
【发布时间】：2013-01-15 21:53:22
【问题描述】：

我刚刚将 jQuery 从 1.8.3 更新到 1.9，它突然开始崩溃。

这是我的模板：

<script type="text/template" id="modal_template">
    <div>hello</div>
</script>

我是这样读的：

modal_template_html = $("#modal_template").html();

这就是我将它转换为 jQuery 对象的方式（我需要对其使用 jQuery 方法）：

template = $(modal_template_html);

... jQuery 崩溃了！

错误：语法错误，无法识别的表达式：

hello

slice.call(docElem.childNodes, 0)[0].nodeType;

jquery-1.9.0.js（第 3811 行）

但是，如果我将模板声明为纯文本变量，它会再次开始工作：

var modal_template_html = '<div>hello</div>';

谁能帮我解决这个问题？

更新： Jquery 团队听说和changed 在 1.10 中恢复正常：

您可能会看到的最大变化是我们放宽了 $() 中处理 HTML 的标准，允许使用前导空格和换行符，就像我们在 1.9 版之前所做的那样

【问题讨论】：

您在使用迁移插件吗？它的消息可以帮助您找到在新版本的 jquery 中不起作用的部分代码。
可以，但没有显示任何警告。
在您分配modal_template_html 时，它是否已经被渲染（或至少放置在 DOM 中）？如果是这样，有什么阻止您直接使用 jQuery 访问它，而不是通过本机 getElementById？
抱歉，我删除并重新添加了您的 Mustache 标签，但我非常怀疑您为什么说那是您的“Mustache 模板”，然后只使用香草 jQuery 来访问它。 @EugeneXa 关于较新的 jQuery 不支持字符串开头的非 < 字符的答案是正确的，所以实际上问题可能是您应该改用 Mustache 来呈现模板？即使你没有 Mustache 标签，它也会清理 HTML 和空格并返回 jQuery 可以使用的东西。
你是对的，理想情况下我应该立即使用 Mustache 来处理字符串，但是在模板中我可能需要更改的东西很少（比如更改 Mustache 变量的名称）关于 3rd-party API 发送给我的数据，这就是为什么我将其转换为 jQuery 对象，对其进行一些操作，然后再转换回字符串。

标签： javascript jquery mustache

【解决方案1】：

在 jQuery 1.9 中，以换行符（或“

http://stage.jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstring

【讨论】：

jQuery 2.0.1 解决了您的问题只是由空格引起的问题。请参阅答案中发布的 URL 中的最后一个 cmets。
在我发现这个之前，我已经敲了 2 天。我非常感谢你！
@Сър Георги Демирев 为什么不使用最新的 jQuery (1.11)？
这就是我正在使用的，同样的错误。在我的情况下，需要解析 HTML，因为它以不带 <.> 的文本开头

【解决方案2】：

我猜你的模板是以空格或制表符开头的。

你可以这样使用 jQuery：

$($.parseHtml(modal_template_html)[1]);

或解析字符串以删除开头的空格：

$(modal_template_html.replace(/^[ \t]+/gm, ''));

【讨论】：

我最终使用 trim() 函数删除前导换行符：$("#modal_template").html().trim();
$($.parseHtml(modal_template_html)[1]);没用。 $(modal_template_html.replace(/^[ \t]+/gm, ''));这完成了工作
使用 parseHTML 而不是 parseHtml
我必须使用/^[ \t\n\r]+/gm。

【解决方案3】：

EugeneXa 在评论中提到了它，但它应该是一个答案：

var template = $("#modal_template").html().trim();

这会从字符串的开头修剪有问题的空格。我将它与 Mustache 一起使用，如下所示：

var markup = Mustache.render(template, data);
$(markup).appendTo(container);

【讨论】：

或者，如果您需要旧的 IE 支持，请使用 jQuery 的 $.trim() 代替原生 Javascript trim()

【解决方案4】：

你可以使用

var modal_template_html = $.trim($('#modal_template').html());
var template = $(modal_template_html);

【讨论】：

【解决方案5】：

作为官方文档：从 1.9 开始，只有以小于 ("

如果已知字符串是 HTML，但可能以非 HTML 标记的任意文本开头，则将其传递给 jQuery.parseHTML()，它将返回代表标记的 DOM 节点数组。可以由此创建一个 jQuery 集合，例如：$($.parseHTML(htmlString))。例如，在处理 HTML 模板时，这将被视为最佳实践。诸如$("<p>Testing</p>").appendTo("body") 等文字字符串的简单使用不受此更改的影响。

【讨论】：

【解决方案6】：

我遇到了同样的错误：
"语法错误，无法识别的表达式：//"
这是 JQuery 的已知错误，所以我需要考虑解决方法，
我所做的是：
我将“脚本”标签更改为“div”
并以角度添加此代码
并且错误消失了...

app.run(['$templateCache', function($templateCache) {
    var url = "survey-input.html";
    content = angular.element(document.getElementById(url)).html()
    $templateCache.put(url, content);
}]);

【讨论】：