JavaScript正規表現の一致例–文字列でJS置換を使用する方法

開発者は長い間テキストエディタを使用してきました。また、ほとんどのツールと同様に、すべてのテキストエディタには、検索と置換という1つの共通の機能があります。

検索と置換をしばらく使用している場合は、この機能がどれほど役立つかを知っているかもしれません。しかし、私たちのほとんどは、このツールが私たちが認識しているよりもさらに強力であることを知りません。

プレーンな文字列だけでなく、パターンも置き換えることができます。これらのパターンは正規表現として知られています。

正規表現は、JavaScriptおよび他のほとんどのプログラミング言語に存在します。正規表現(略して)は、単純な検索パターンと複雑な検索パターンを見つけるのに役立つ非常に強力なツールです。

文字列検索アルゴリズムも、コンピュータサイエンスの重要な分野です。この記事では、JavaScriptでこのすばらしいツールを使用する方法を学びます。

なぜ正規表現なのか?

長いドキュメントが渡され、そこからすべての電子メールを抽出するように指示されるまで、正規表現の本当の重要性を理解することはできません。

手動で行うこともできますが、それを実行できる超高速の方法があります。最新のテキストエディタのほとんどは、検索オプションで正規表現を許可しています。通常はで表され.*ます。

そして、それはすべての正規表現ができるわけではありません–電子メールはほんの一例です。URLや括弧内のテキストなど、パターンに従う任意のタイプの文字列を検索できます。

正規表現を使用して、電子メールの検証など、特定のタイプのパターンを検証することもできます。次のような長い検証ロジックを置き換えることができます。

function IsValidEmail(email) { if (email.length <= 2) { return false; } if (email.indexOf("@") == -1) { return false; } var parts = email.split("@"); var dot = parts[1].indexOf("."); var len = parts[1].length; var dotSplits = parts[1].split("."); var dotCount = dotSplits.length - 1; if (dot == -1 || dot  2) { return false; } for (var i = 0; i < dotSplits.length; i++) { if (dotSplits[i].length == 0) { return false; } } return true; };

このような1行で:

function isValidEmail(email) { return /^(([^()\[\]\\.,;:\[email protected]"]+(\.[^()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email); }

その正規表現は怖いように見えますが、覚えておく必要はありません。それがどのように機能するかを理解すれば、実装は非常に簡単になります。

JavaScript正規表現一致

JavaScriptには、文字列のmatchメソッドがあります。このメソッドは、文字列内の正規表現を照合するために使用できます。

このメソッドは、テキストエディタのfindメソッドと同じです。正規表現を使用して指定された文字列を検索し、すべての一致の配列を返します。matchメソッドのプロトタイプは次のとおりです。

str.match(regexp)

これにより、文字列(str)で正規表現(regexp)を検索すると、すべての一致の配列が返されます。

このメソッドの基本的な使用法は、文字列内のすべての単語をカウントすることです。例えば:

var str = "This is a test string"; var matchArr = str.match(/\w+/g); console.log(matchArr.length); //prints 5

この\w+正規表現については、この記事の後半で学習します。

このような正規表現を使用すると、面倒なロジックを作成する必要があるさまざまなタスクを実行できます。例として、電子メール検証機能があります。すべての基準をテストする必要がありますが、正規表現を使用すると簡単にできます。

正規表現はほとんどの文字列関数で有効ですが、確認したい場合は関数のプロトタイプを確認する必要があります。そのような方法の1つは、Replaceメソッドです。以下でそれについてもっと学びましょう。

JavaScript置換メソッド

JavaScriptには、いくつかの文字列ユーティリティ関数があります。交換はそれらの1つです。replaceメソッドのプロトタイプは次のとおりです。

const newStr = str.replace(regexp|substr, newSubstr|function)

ご覧のとおり、replaceメソッドは文字列に作用し、文字列を返します。置換される文字列と置換される文字列の2つのパラメータを取ります。

最初のパラメーターは、文字列または正規表現のいずれかです。ここでは、正規表現の力を使用して、複雑な検索パターンを文字列に置き換えることができます。

2番目のパラメーターも関数である可能性があります。それを示すために、例を確認してみましょう。

var str = "This is a test string"; var newStr = str.replace(/\w+/g, function(match) { return match.split("").reverse().join(""); }); console.log(newStr); //prints "sihT si a tset gnirts"

この例では、文字列内のすべての単語を逆にします。ご覧のとおり、replaceとregexの組み合わせは、JavaScriptの非常に強力なツールです。

replaceメソッドは、元の文字列の処理後に特定の検索パターンを他の文字列に置き換える場合に役立ちます。

また、無効な一致を修正するためにも使用できます。たとえば、電子メールを検証し、可能であれば、無効な電子メールを修正します。

Regexの有用性がわかったところで、いくつかの基本的な正規表現を学び、文字列を検索しましょう。

基本的な正規表現

Though regular expressions are a vast topic, the basic ones are very simple to understand and remember. Let us try to understand some basic terms associated with Regular expressions.

Literals

A literal is any character which is evaluated as itself and not in any general form. Thus, word is also a valid regular expression which will match only "word".

If you want to replace all instances of a given word in JavaScript, you could do this:

var str = "JavaScript is a very popular programming language. javascript is used in web developement. javascript is very easy to learn."; var newStr = str.replace(/javascript/gi,"js"); console.log(newStr); /* prints "js is a very popular programming language. js is used in web developement. js is very easy to learn." */

This replaces all occurrences of JavaScript with JS. We accomplished this using the g identifier, which stands for global search. That is, it searches all occurrences rather than just the first one.

There is also an i identifier. It stands for case-insensitive search. It matches the string ignoring the case.

Thus a literal can be used to match a specific character or group of characters.

Meta-characters

A meta-character is used for generic search, such as to search any digit, any character, or any alpha-numeric character. These are some common meta-characters:

  • \d matches any digit, that is, digits from 0 to 9
  • \w matches any alpha-numeric character, That is, alphabets a-z, A-Z and digits 0-9.
  • \s matches any whitespace

Similarly, \D , \W and \S match any non-digit, non-alphanumeric, and non-whitespace characters, respectively. For example, \d\d\d would match any three digits in a row.

Quantifiers

A quantifier is used to quantify any literal or meta-character. It can be used to select multiple occurrences of a given character. There are four types of quantifiers defined in regex:

  • * is used to match 0 or more occurrences of a given character.
  • + is used to match 1 or more occurrences of a given character.
  • . is used to match either no occurrence or 1 occurrence of a given character.
  • {min,max} or {n} can be used to match a number of occurrences in a range or a given number of times n

An example would be the one we used above to reverse every word in a string.

  • \w+ matches every word in a string
  • \w matches any alpha-numeric character
  • \w+ matches one or more occurrences of an alpha-numeric character, that is, every word in a string.

We could also use quantifiers to replace multiple whitespaces with a single whitespace. For example:

var str = "This is a string with multiple whitespaces"; var newStr = str.replace(/\s\s+/g, " "); console.log(newStr); //prints "This is a string with multiple whitespaces"

There are plenty of other uses for quantifiers.

Position meta-characters

There are also position meta-characters which represent a position. For example ^ represents the start of a line, $ represents end of a line, and \b represents word boundaries.

Conclusion

In this article, we learned how important regular expressions are. We also saw how they can be used for searching simple as well as complex search patterns.

This has great potential in programming with text. String-matching algorithms are used in DNA matching and form a significant branch of computer science.

Once you master regex you can use it with JavaScript's match and replace methods to simplify long programs and use it for validation of certain patterns. Regex can also help shorten long programs and make them more understandable.

Now you can use your own creativity and make wonderful regex – so good luck with your new skill.

This was a very basic overview of regular expressions. If you want to master the art of regex, I suggest you to check out Daniel Shiffman's tutorial here.

Hey, I hope you loved this article and learned something. You can find me at my internet home, theabbie.github.io  or my Github. Do checkout my other articles. Thank you.