使用 jquery，如何在 ajax 响应 HTML 内容中突出显示搜索词答案

【问题标题】：using jquery, how to highlight search term in ajax response HTML content使用 jquery，如何在 ajax 响应 HTML 内容中突出显示搜索词
【发布时间】：2013-01-15 17:59:33
【问题描述】：

我看到很多用于在常规页面中查找搜索词的库和插件，但它们并不是用来处理突出显示 ajax 响应内容中的字符串的。例如。我发现很多脚本都会调用主函数，例如：

`returnDataSearchTermHighlightified = highlight(searchString);`

(^^^ 来自接受的答案：Highlight search terms (select only leaf nodes))

...highlight() 函数缺少的第二个参数会自动填充页面的整个 HTML 正文。但在我的情况下，我不想突出显示父正文中的关键字，而是仅在 ajax 响应内容中突出显示（我在父正文中填充的 div），所以我不能这样做，例如这个：

returnDataSearchTermHighlightified = highlight(searchString);

...如果我试试这个：

...
var jqxhr = $.ajax(

        {
            type: 'POST',
            url: ajaxWorkerSourceUrl,
            data: form_data,
            timeout: 15000
        }
    )
    .success(function(returnData) {
        $("#ajaxSpinner").fadeOut('slow');
        searchString = 'example';
        returnDataSearchTermHighlightified = highlight(searchString, returnData);

...然后页面似乎加载我的 ajax 响应没有错误，但响应内容是空的！谁能指出我解决这个问题？ .. 甚至是设计用于处理 jquery ajax 响应内容中的关键字突出显示的库或插件？

谢谢！

【问题讨论】：

也许使用async:true 可以解决问题
你在哪里使用returnData？
应该可以正常工作，只要您的功能正常工作并且您将 returnDataSearchTermHighlightified 插入到 DOM 中
您也可以在 html 响应中使用 jQuery，方法是将其包装在 $()
我相信highlight(searchString, $(returnData)) 会成功的。

标签： jquery highlighting

【解决方案1】：

似乎function highlight(term, base) 要求base 的类型为 Element 或 jQuery 。

试试

.success(function(returnData) {
        $("#ajaxSpinner").fadeOut('slow');
        var searchString = 'example',
            base = $(returnData);
        highlight(searchString, base);
        base.appendTo(document.body); //whatever you were going to do..

【讨论】：

hmm.. 我确实尝试过，我得到了相同的结果 - 我在父级中的目标 div 只是填充了任何内容（没有错误）。
在高亮函数调用前后检查base.length。喜欢这个console.log(base.length) 或更好的console.log(base.html())
您的提示让我思考和查看代码的方式让我找到了答案（无论如何它现在对我有用）。正如你所说，我需要使用：base = $(returnData); 而不是 base = returnData; ...with：returnDataSearchTermHighlightified = highlight(searchString, base); ...然后是另一个正在杀死它的东西（让我感到困惑的是，在接受的答案中缺少的东西，在这里: stackoverflow.com/a/3241437/530006 )，是 highlight(term, base) {} 函数的一些返回输出。请参阅我对该答案的评论。