jquery - 突出显示重音字符

Question

我正在使用 jquery.highlight 插件:http://code.google.com/p/gce-empire/source/browse/trunk/jquery.highlight.js?r=2

当我搜索带重音的单词时，例如“café”，它不会突出显示“café”匹配...不过，“cafe”效果很好...所以，我希望能够突出显示重音单词...关于如何使用此操作的任何想法插件？

谢谢!

编辑好的，这是有效的，但是我必须在 'pattern' 和 'patternNoAccents' 变量上的第一个“(”和最后一个“)”之间添加一个空格，因为如果在开头或结尾有重音字符单词，它不起作用(例如“咖啡馆”)

这样做的问题是它突出显示了单词 AND 前后的空格。还有其他解决办法吗？

jQuery.extend({
            highlight: function (node, re, nodeName, className) {
                if (node.nodeType === 3) {
                    var match = node.data.match(re);
                    if (match) {
                        var highlight = document.createElement(nodeName || 'span');
                        highlight.className = className || 'highlight';
                        var wordNode = node.splitText(match.index);
                        wordNode.splitText(match[0].length);
                        var wordClone = wordNode.cloneNode(true);
                        highlight.appendChild(wordClone);
                        wordNode.parentNode.replaceChild(highlight, wordNode);
                        return 1; //skip added node in parent
                    }
                } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
                        !/(script|style)/i.test(node.tagName) && // ignore script and style nodes
                        !(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
                    for (var i = 0; i < node.childNodes.length; i++) {
                        i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
                    }
                }
                return 0;
            }
        });

        jQuery.fn.unhighlight = function (options) {
            var settings = { className: 'highlight', element: 'span' };
            jQuery.extend(settings, options);

            return this.find(settings.element + "." + settings.className).each(function () {
                var parent = this.parentNode;
                parent.replaceChild(this.firstChild, this);
                parent.normalize();
            }).end();
        };

        function stripAccents(str) { 
                var rExps=[ 
                {re:/[\xC0-\xC6]/g, ch:'A'}, 
                {re:/[\xE0-\xE6]/g, ch:'a'}, 
                {re:/[\xC8-\xCB]/g, ch:'E'}, 
                {re:/[\xE8-\xEB]/g, ch:'e'}, 
                {re:/[\xCC-\xCF]/g, ch:'I'}, 
                {re:/[\xEC-\xEF]/g, ch:'i'}, 
                {re:/[\xD2-\xD6]/g, ch:'O'}, 
                {re:/[\xF2-\xF6]/g, ch:'o'}, 
                {re:/[\xD9-\xDC]/g, ch:'U'}, 
                {re:/[\xF9-\xFC]/g, ch:'u'}, 
                {re:/[\xD1]/g, ch:'N'}, 
                {re:/[\xF1]/g, ch:'n'} ]; 
                for(var i=0, len=rExps.length; i<len; i++) 
                        str=str.replace(rExps[i].re, rExps[i].ch); 
                return str; 
        };

        jQuery.fn.highlight = function (words, options) {
            var settings = { className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false };
            jQuery.extend(settings, options);

            if (words.constructor === String) {
                words = [words];
            }
            words = jQuery.grep(words, function(word, i){
              return word != '';
            });
            words = jQuery.map(words, function(word, i) {
              return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
            });
            wordsNoAccents = jQuery.map(words, function(word, i) {
              return stripAccents(word);
            });

            if (words.length == 0) { return this; };

            var flag = settings.caseSensitive ? "" : "i";
            var pattern = "( " + words.join("|") + " )";

            if (settings.wordsOnly) {
                pattern = "\\b" + pattern + "\\b";
            }

            var patternNoAccents = "( " + wordsNoAccents.join("|") + " )";

            if (settings.wordsOnly) {
                patternNoAccents = "\\b" + patternNoAccents + "\\b";
            }

            var re = new RegExp(pattern, flag);
            var reNA = new RegExp(patternNoAccents, flag);

            console.log(re);
                console.log(reNA);
            return this.each(function () {
                jQuery.highlight(this, re, settings.element, settings.className);
                jQuery.highlight(this, reNA, settings.element, settings.className);
            });
        };

Answer 1

看看这个例子。 http://jsfiddle.net/bNPjQ/如果您经过 Café，它将突出显示 Cafe 和 Café。不确定这是否是您想要的功能，但如果您希望它仅突出显示咖啡馆，我可以帮助您。

我从原始插件开始，添加了 stripAccents 函数，更改了一行，并在突出显示函数中添加了对 stripAccents 的调用。我用评论标记了我更改的所有内容。

当你运行它时，它会在没有 WordsOnly 的情况下进行突出显示，然后 2 秒后取消突出显示并使用 WordsOnly 进行另一次突出显示。