Javascript Regular Expression that match accent and none-accented version of a string

Question

I'm looking for a way using regular expression that will match accented and none accented version of a string using Javascript.

I'm extending jQuery-ui's autocomplete to add bold html tag around words in the autocomplete, here's my code:

<script>
 // Add feature to autocomplete to make the searched query in bold letter
    $.extend($.ui.autocomplete.prototype, {
        _renderItem: function (ul, item) {
            var searchMask = this.element.val();
            var replaceMask = "<b style=\"\">$&</b>";
            var splittedMask = searchMask.split(' ');
            var html = regEx = '';
            // Fix I added so it works with multiple words.
            splittedMask.forEach(function(word){
                if (word.length >= 2){
                    // Here is the part that should interest you
                    regEx = new RegExp(word, "ig");
                    if (html == ''){
                        html = item.label.replace(regEx, replaceMask);
                    } else {
                        html = html.replace(regEx, replaceMask);
                    }
                } else {
                    html = item.label;
                }
            });

            return $("<li></li>")
                .data("item.autocomplete", item)
                .append($("<span></span>").html(html))
                .appendTo(ul);
        }
    });
</script>

So right now, if I write (for example) Montréal, it works and finds out Montréal in my menu, but if I write Montreal, it will not be found by the RegEx.

I've looked online but couldn't find the right RegEx.

You will need to normalize input first as there is no way to match `é` with `e`. You may consider replacing all `e` with `[eé]` in the pattern though. — Wiktor Stribiżew, May 03 '17 at 17:22
@WiktorStribiżew it is actually a good idea man, I did it with e to [eé] and a to [aà]. You should do an answer with it I believe it's a good solution to my problem — Yann Chabot, May 04 '17 at 13:01

score 2 · Answer 1 · answered May 03 '17 at 17:25

2

It's not straightforward - basically the only way to do it is to replace the accented characters with non-accented versions before passing them into your RegEx.

This article has some example code (look for the "Hey man, I'm only here for the copy/paste" section), plus a lot of caveats: Accent Folding for Auto-Complete

answered May 03 '17 at 17:25

Alex Warren

7,187
2
31
30

I saw that before sadly, it remove the accent and then attempt a search but then my Montréal will not be found, only Montreal will be found – Yann Chabot May 03 '17 at 17:38

score 1 · Accepted Answer · edited May 23 '17 at 12:10

You might consider normalizing the input first as there is no way to match é with e with a regex.

Alternatively, you may consider replacing all e with [eé] in your patterns (it will be safe you you only build the pattern out of literal strings). You may use an associative array where keys are used to search for a letter and values containing the character class to match all the accented variations.

Javascript Regular Expression that match accent and none-accented version of a string

2 Answers2