查找并突出显示单词中所有出现的单词并显示匹配的描述

Question

我有一个名为Data的数组，其中包含我要查找的所有单词，并高亮显示这些单词的描述。
我使用上一个问题的答案来连接单词，并在RegExp中使用它们。

var w = Data.map(function(obj){ return obj.words.join("|") }).join("|");   
var words = "(" + w + ")";
var wordsToReplace = new RegExp("\\b" + words + "\\b","g") 

除非重音字母外，这非常有用。 单词应该包裹在span元素中，我想使用jQuery UI工具提示来显示描述。 正如我在最后一个问题中回答的那样。
我试图用jQuery解决问题：包含选择器， RegExp和各种高亮插件 ，但是没有运气。 问题始终是带有重音符号的字母，否则脚本无法找到整个单词，并且仅突出显示单词的词根。

测试JSFiddle

Answer 1

您可以尝试这样做以突出显示它们并显示工具提示：

$(document).ready(function () {
    var src_str = $(".content").html();
    for(var i=0;i<Data.length;i++){
        for(var word=0;word<Data[i].words.length;word++){
        var term = Data[i].words[word];
        term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
        var pattern = new RegExp("("+term+")", "i");
        src_str = src_str.replace(pattern, "<mark data-tooltip-index='"+i+"' >$1</mark>");
        src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");
        }
    }
    $(".content").html(src_str);

    $( document ).tooltip({
        items: "mark",
        content: function () {
            var index = $(this).attr("data-tooltip-index");
            return Data[index].desc;
        }
    });

}); // document ready end

完整的提琴： http : //jsfiddle.net/juvian/Ukw9c/2/