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
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

  • By
    Resize an Image Using Canvas, Drag and Drop and the File API

    Recently I was asked to create a user interface that allows someone to upload an image to a server (among other things) so that it could be used in the various web sites my company provides to its clients. Normally this would be an easy task—create a...

  • By
    CSS Custom Cursors

    Remember the Web 1.0 days where you had to customize your site in every way possible?  You abused the scrollbars in Internet Explorer, of course, but the most popular external service I can remember was CometCursor.  CometCursor let you create and use loads of custom cursors for...

Discussion

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