Match Accented Letters with Regular Expressions

By  on  

Regular expressions are used for a variety of tasks but the one I see most often is input validation. Names, dates, numbers...we tend to use regular expressions for everything, even when we probably shouldn't.

The most common syntax for checking alphabetic characters is A-z but what if the string contains accented characters? Characters like ğ and Ö will make the regex fail. That's where we need to use Unicode property escapes to check for a broader letter format!

Let's look at how we can use \p{Letter} and the Unicode flag (u) to match both standard and accented characters:

// Single word
"Özil".match(/[\p{Letter}]+/gu)

// Word with spaces
"Oğuzhan Özyakup".match(/[\p{Letter}\s]+/gu);

Using regular expressions to validate strings, especially names, is much more difficult than A-z+. Names and other strings can be very diverse -- let's not insult users by making them provide non-accented letters just to pass validation!

Recent Features

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    Creating Spacers with Flexbox

    I was one of the biggest fans of flexbox before it hit but, due to being shuffled around at Mozilla, I never had the chance to use it in any practice project; thus, flexbox still seems like a bit of a mystery to me.  This greatly...

  • By
    jQuery Link Nudge Plugin

    A while back I debuted a tasteful mouseover/mouseout technique called link nudging. It started with a MooTools version and shortly thereafter a jQuery version. Just recently Drew Douglass premiered a jQuery plugin that aimed at producing the same type of effect.

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!