jquery – 突出显示重音字符

2023年3月7日 209次阅读

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

当我搜索重音词时,例如“café”,它不会突出“咖啡馆”比赛…虽然“咖啡馆”工作正常,但是..所以,我希望能够突出重音词…任何关于如何做到这一点的想法插入？

谢谢！

编辑
好的,这是有效的,但我必须在’pattern’和’patternNoAccents’变量上的第一个“(”和最后一个“)之间添加一个空格,因为如果在开始或结束时有一个重音字符一句话,它不会起作用(例如’café’)

这个问题是它突出了前后的单词和空格.还有其他解决方案吗？

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);
            });
        };

最佳答案 看看这个例子.
http://jsfiddle.net/bNPjQ/如果您经过咖啡厅,它将突出咖啡厅和咖啡厅.不确定这是否是所需的功能,但是如果您希望它只突出显示Café,我可以帮助您.

我从原始插件开始,添加了stripAccents函数,更改了一行,并在highlight函数中添加了对stripAccents的调用.我用评论标记了我改变的所有内容.

当你运行它时,它会在没有wordsOnly的情况下进行高亮显示,然后在2秒后取消高亮显示并使用wordsOnly执行另一个高亮显示.

点赞