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
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    Highlight Table Rows, Columns, and Cells Using MooTools 1.2.3

    Row highlighting and individual cell highlighting in tables is pretty simple in every browser that supports :hover on all elements (basically everything except IE6). Column highlighting is a bit more difficult. Luckily MooTools 1.2.3 makes the process easy. The XHTML A normal table. The cells...

  • By
    Comment Preview Using MooTools

    Comment previewing is an awesome addition to any blog. I've seen really simple comment previewing and some really complex comment previewing. The following is a tutorial on creating very basic comment previewing using MooTools. The XHTML You can set up your XHTML any way you'd like.

Discussion

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