在 jQuery 中突出显示带有(和不带有)重音字符/变音符号的单词

发布于 2024-11-08 13:46:51 字数 462 浏览 0 评论 0原文

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

我用它来突出显示搜索结果。

问题是,如果我搜索像 “café” 这样的内容,它不会突出显示任何单词。

如果我搜索“cafe”,即使我的结果同时包含“cafe”和“cafe”。 “café”,它将仅突出显示“cafe”

因此,我需要突出显示单词的所有“版本”,无论是否带有变音符号。

这可能吗?

I'm using the jquery.highlight plugin: http://code.google.com/p/gce-empire/source/browse/trunk/jquery.highlight.js?r=2

I'm using it to highlight search results.

The problem is that if I search something like "café" it won't highlight any words.

And if I search "cafe", even though my results contains both "cafe" & "café", it will only highlight "cafe".

So, I would need to highlight all "versions" of the words, with or without diacritics.

Is that possible?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

歌枕肩 2024-11-15 13:46:51

http://jsfiddle.net/nHGU6/

测试 HTML:

<div id="wrapper-accent-sensitive">
 <p>cafe</p>
 <p>asdf</p>
 <p>café</p>
</div>
<hr />
<div id="wrapper-not-accent-sensitive">>
 <p>cafe</p>
 <p>asdf</p>
 <p>café</p>
</div>

测试 CSS:

.yellow {
    background-color: #ffff00;
}

替换 Javascript:

jQuery.fn.highlight = function (words, options) {
    var accentedForms = {
        'c': 'ç',
        'e': 'é'
    };

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

    if (settings.accentInsensitive) {
        for (var s in accentedForms) {
            words = words.replace(s, '[' + s + accentedForms[s] + ']');
        }
    }

    if (words.constructor === String) {
        words = [words];
    }

    var flag = settings.caseSensitive ? "" : "i";
    var pattern = "(" + words.join("|") + ")";
    if (settings.wordsOnly) {
        pattern = "\\b" + pattern + "\\b";
    }
    var re = new RegExp(pattern, flag);

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

测试代码:

$(document).ready(function() {
    $("#wrapper-accent-sensitive").highlight("cafe", { className: 'yellow' });
    $("#wrapper-not-accent-sensitive").highlight("cafe", { className: 'yellow', accentInsensitive: true });
});

http://jsfiddle.net/nHGU6/

Test HTML:

<div id="wrapper-accent-sensitive">
 <p>cafe</p>
 <p>asdf</p>
 <p>café</p>
</div>
<hr />
<div id="wrapper-not-accent-sensitive">>
 <p>cafe</p>
 <p>asdf</p>
 <p>café</p>
</div>

Test CSS:

.yellow {
    background-color: #ffff00;
}

Replacement Javascript:

jQuery.fn.highlight = function (words, options) {
    var accentedForms = {
        'c': 'ç',
        'e': 'é'
    };

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

    if (settings.accentInsensitive) {
        for (var s in accentedForms) {
            words = words.replace(s, '[' + s + accentedForms[s] + ']');
        }
    }

    if (words.constructor === String) {
        words = [words];
    }

    var flag = settings.caseSensitive ? "" : "i";
    var pattern = "(" + words.join("|") + ")";
    if (settings.wordsOnly) {
        pattern = "\\b" + pattern + "\\b";
    }
    var re = new RegExp(pattern, flag);

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

Test code:

$(document).ready(function() {
    $("#wrapper-accent-sensitive").highlight("cafe", { className: 'yellow' });
    $("#wrapper-not-accent-sensitive").highlight("cafe", { className: 'yellow', accentInsensitive: true });
});
帅气称霸 2024-11-15 13:46:51

我可以推荐一个开箱即用的支持此功能的优秀库:highlight.js。虽然它旨在对代码块进行语法突出显示,但您也可以通过定义相应的语言语法来突出显示其他(关键字)单词。

例如,在语言规范中设置 lexemes : '[äöüäÖÜßa-zA-Z]+' 选项将启用带有德语特殊字符的关键字。

I can recommend a good library that supports this out of the box: highlight.js. While it is designed to do syntax highlighting for code blocks, you can equally as well highlight other (key-)words by defining an according language syntax grammar.

Setting the option of lexemes : '[äöüÄÖÜßa-zA-Z]+' in your language specification will enable keywords with German special characters, for example.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文