javascript - 未捕获错误 : Syntax error, 无法识别的表达式 : test <a href ="http://google.com">http://google. com</a> 测试

Question

当我们尝试在 Kendo 网格中绑定(bind)文本(可能同时包含纯文本和 URL)时，我们收到“未捕获错误:语法错误，无法识别的表达式:测试 http://google.com 测试”错误

请找到我为网格行绑定(bind)的以下方法。

function getLocationLink(data) {   
     if (data.ActionComment != '' && data.ActionComment != 'undefined') {
        var urlText = data.ActionComment; //urlText value is "test http://www.google.com test
        var urlRegex = /(https?:\/\/[^\s]+)/g;
        return urlText.replace(urlRegex, function(url) {
            return '<a href="' + url + '">' + url + '</a>';
        });
      }
    return data.ActionComment;
}

我可以在 document.ready 中绑定(bind)这个 anchor 链接，但是上面的函数是在 document.ready 之后执行的。所以除了这里我没有任何选项来绑定(bind)这个 anchor 链接。 有人可以提供解决方案吗？

Answer 1

尝试将结果字符串包装在另一个元素中，例如 <span> :

var result = urlText.replace(urlRegex, function(url) {
    return '<a href="' + url + '">' + url + '</a>';
});
return '<span>' + result + '</span>';

或者通过 parsing the string directly 返回 DOM 节点(注:jQuery 1.8 或更高版本):

var result = urlText.replace(urlRegex, function(url) {
    return '<a href="' + url + '">' + url + '</a>';
});
return $.parseHTML(result);

<小时/>

您提到的错误is from Sizzle ，通常位于 jQuery(selector) 后面的选择器引擎.

这表明 getLocationLink() 的结果正在传递至jQuery() ，正在处理它 as a selector 而不是as html .

jQuery('test <a href>http://google.com</a> test');
// Syntax error, unrecognized expression: ...

让字符串以 < 开头，与 <span> 一样，会说服jQuery()这是标记。并且，提供a collection of Nodes将避免条件解析。

jQuery('<span>test <a href>http://google.com</a> test</span>');
// [ <span>...</span> ]

jQuery(jQuery.parseHTML('test <a href>http://google.com</a> test'));
// [ "test ", <a>...</a>, " test" ]