查找並突出顯示單詞中所有出現的單詞並顯示匹配的描述

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/