ホームページ ウェブフロントエンド jsチュートリアル JavaScript での正規表現の賢い使用例

JavaScript での正規表現の賢い使用例

Aug 16, 2017 am 10:50 AM
javascript js 表現

正規表現を学ぶのに多くの時間を費やして疑問を抱いた子供もいるでしょうが、正規表現はメール アドレスを確認するためだけのものであり、他の場所では基本的に役に立たないことがわかります。人々はそれを難し​​くてほとんど役に立たないと考えて、単にそれを学ばないのです。誰もが知っているように、プログラミングの専門家になりたいなら、正規表現をいじる必要があります。GitHub の優れたオープン ソース ライブラリとフレームワークには、強力な正規表現がたくさんあります。jQuery の作者は、正規表現の星の王子様とも呼ばれていました。それから。ここでは、私が仕事で使用しており、開発者の知恵の火花があらゆる場所で輝いている、正規表現の素晴らしい使用法をいくつか紹介します。
要件を達成するには多くの方法があります。どれが良いでしょうか? 人によって意見は異なります。ここでは、ルールの学習に対する全員の関心を刺激し、ルールを効果的に適用する思考を養うための比較思考のみを提供します。
フロントエンド開発者は常に独自のスキルを持っています。結局のところ、フロントエンド開発はバックエンドとは異なります。コードが冗長である場合、帯域幅が影響を受けます。少なくとも効率は低下します。 Regular Expression (正規表現)、これは割るのが難しいナッツですが、噛むとおいしいです。そこで今日も正規表現の裏技をいくつか紹介します。
正正大法は良いです、正正大法は良いです、正正大法は良いです、重要なことは3回言います。
1. リンクの値を取得します https://www.baidu.com?name=jawil&age=23
非正規実装:

function getParamName(attr) { 
  let search = window.location.search // "?name=jawil&age=23" 
  let param_str = search.split('?')[1] // "name=jawil&age=23" 
  let param_arr = param_str.split('&') // ["name=jawil", "age=23"] 
  let filter_arr = param_arr.filter(ele => { // ["name=jawil"]    return ele.split('=')[0] === attr  }) 
  return decodeURIComponent(filter_arr[0].split('=')[1])}
 console.log(getParamName('name')) // "jawil"
ログイン後にコピー


通常の実装を使用します:

function getParamName(attr) { 
  let match = RegExp(`[?&]${attr}=([^&]*)`) //分组运算符是为了把结果存到exec函数返回的结果里    .exec(window.location.search)  //["?name=jawil", "jawil", index: 0, input: "?name=jawil&age=23"]  return match && decodeURIComponent(match[1].replace(/\+/g, ' ')) // url中+号表示空格,要替换掉}
   console.log(getParamName('name'))  // "jawil"
ログイン後にコピー


よく理解していない場合は、まず学習してください。この記事を確認してください: [JS 上級] test、exec、match、replace

2. 数値の書式設定の問題、1234567890 --> 1,234,567,890

非正規の実装:

let test = '1234567890'
function formatCash(str) {
    let arr = []
    for (let i = 1; i < str.length; i--) {
        if (str.length % 3 && i == 1) arr.push(str.substr(0, str.length % 3)) if (i % 3 === 0) arr.push(str.substr(i - 2, 3))
    }
    return arr.join(&#39;,&#39;)
}
console.log(formatCash(test)) // 1,234,567,890
ログイン後にコピー


通常のルールで実装 :

let test1 = &#39;1234567890&#39;let format = test1.replace(/\B(?=(\d{3})+(?!\d))/g, &#39;,&#39;)
 console.log(format) // 1,234,567,890
ログイン後にコピー


通常のルール /B(?=(d{3})+(?!d))/g を簡単に分析してみましょう:

/B(?=(d{3} )+(?!d ))/g: 通常の一致する境界 B、境界の後には (d{3})+(?!d);
(d{3})+: 1 以上である必要があります 3連続する数字;
(?!d): ステップ 2 の 3 つの数字の後に数字を続けることはできません。
(d{3})+(?!d): したがって、一致する境界の後には 3*n が続く必要があります。 (n>=1) の数値。
最後に、一致した境界をすべて置き換えて、目標を達成します。

3. 文字列の左側と右側のスペースを削除します。「jaw il」 --> 「jaw il」 4. 素数であるかどうかの判定 3 --> true

素数は素数とも呼ばれます。 1 より大きく、1 と整数自体を除く他の自然数で割り切れない自然数を指します。
非定期実施:

function trim(str) {
    let start,
    end
    for (let i = 0; i < str.length; i++) {
        if (str[i] !== &#39; &#39;) {
            start = i
            break
        }
    }
    for (let i = str.length - 1; i > 0; i--) {
        if (str[i] !== &#39; &#39;) {
            end = i
            break
        }
    }
    return str.substring(start, end - 1)
}
let str = "  jaw il "console.log(trim(str)) // "jaw il"
ログイン後にコピー

通常実施:

function isPrime(num) {return !/^1?$|^(11+?)\1+$/.test(Array(num+1).join(&#39;1&#39;))}
 console.log(isPrime(19)) // true
ログイン後にコピー

要使用这个正规则表达式,你需要把自然数转成多个1的字符串,如:2 要写成 “11”, 3 要写成 “111”, 17 要写成“11111111111111111”,这种工作使用一些脚本语言可以轻松的完成,JS实现也很简单,我用Array(num+1).join('1')这种方式实现了一下。
一开始我对这个表达式持怀疑态度,但仔细研究了一下这个表达式,发现是非常合理的,下面,让我带你来细细剖析一下是这个表达式的工作原理。
首先,我们看到这个表达式中有“|”,也就是说这个表达式可以分成两个部分:/^1?$/ 和 /^(11+?)\1+$/
第一部分:/^1?$/, 这个部分相信不用我多说了,其表示匹配“空串”以及字串中只有一个“1”的字符串。
第二部分:/^(11+?)\1+$/ ,这个部分是整个表达式的关键部分。其可以分成两个部分,(11+?) 和 \1+$ ,前半部很简单了,匹配以“11”开头的并重复0或n个1的字符串,后面的部分意思是把前半部分作为一个字串去匹配还剩下的字符串1次或多次(这句话的意思是——剩余的字串的1的个数要是前面字串1个数的整数倍)。
可见这个正规则表达式是取非素数,要得到素数还得要对整个表达式求反。通过上面的分析,我们知道,第二部分是最重要的,对于第二部分,举几个例子,
示例一:判断自然数8。我们可以知道,8转成我们的格式就是“11111111”,对于 (11+?) ,其匹配了“11”,于是还剩下“111111”,而 \1+$ 正好匹配了剩下的“111111”,因为,“11”这个模式在“111111”出现了三次,符合模式匹配,返回true。所以,匹配成功,于是这个数不是质数。
示例二:判断自然数11。转成我们需要的格式是“11111111111”(11个1),对于 (11+?) ,其匹配了“11”(前两个1),还剩下“111111111”(九个1),而 \1+$ 无法为“11”匹配那“九个1”,因为“11”这个模式并没有在“九个1”这个串中正好出现N次。于是,我们的正则表达式引擎会尝试下一种方法,先匹配“111”(前三个1),然后把“111”作为模式去匹配剩下的“11111111”(八个1),很明显,那“八个1”并没有匹配“三个1”多次。所以,引擎会继续向下尝试……直至尝试所有可能都无法匹配成功。所以11是素数。
通过示例二,我们可以得到这样的等价数算算法,正则表达式会匹配这若干个1中有没有出现“二个1”的整数倍,“三个1”的整数倍,“四个1”的整数倍……,而,这正好是我们需要的算素数的算法。现在大家明白了吧。
5、字符串数组去重 ["a","b","c","a","b","c"] --> ["a","b","c"]
这里只考虑最简单字符串的数组去重,暂不考虑,对象,函数,NaN等情况,这种用正则实现起来就吃力不讨好了。
非正则实现:
①ES6实现

let str_arr=["a","b","c","a","b","c"] function unique(arr){  return [...new Set(arr)]}
 console.log(unique(str_arr)) // ["a","b","c"]
ログイン後にコピー

②ES5实现

var str_arr = ["a", "b", "c", "a", "b", "c"] function unique(arr) {    return arr.filter(function(ele, index, array) {        return array.indexOf(ele) === index    })}
 console.log(unique(str_arr)) // ["a","b","c"]
ログイン後にコピー

③ES3实现

var str_arr = ["a", "b", "c", "a", "b", "c"]
function unique(arr) {
    var obj = {},
    array = []
    for (var i = 0,
    len = arr.length; i < len; i++) {
        var key = arr[i] + typeof arr[i]
        if (!obj[key]) {
            obj[key] = true array.push(arr[i])
        }
    }
    return array
}
console.log(unique(str_arr)) // ["a","b","c"]
ログイン後にコピー

额,ES4呢。。。对不起,由于历史原因,ES4改动太大,所以被废弃了。
可以看到从ES3到ES6,代码越来越简洁,JavaScript也越来越强大。

以上がJavaScript での正規表現の賢い使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます 株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます Dec 17, 2023 pm 06:55 PM

株式分析に必須のツール: PHP および JS でローソク足チャートを描画する手順を学びます。特定のコード例が必要です。インターネットとテクノロジーの急速な発展に伴い、株式取引は多くの投資家にとって重要な方法の 1 つになりました。株価分析は投資家の意思決定の重要な部分であり、ローソク足チャートはテクニカル分析で広く使用されています。 PHP と JS を使用してローソク足チャートを描画する方法を学ぶと、投資家がより適切な意思決定を行うのに役立つ、より直感的な情報が得られます。ローソク足チャートとは、株価をローソク足の形で表示するテクニカルチャートです。株価を示しています

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト 推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする Dec 18, 2023 pm 03:39 PM

インターネット金融の急速な発展に伴い、株式投資を選択する人がますます増えています。株式取引では、ローソク足チャートは一般的に使用されるテクニカル分析手法であり、株価の変化傾向を示し、投資家がより正確な意思決定を行うのに役立ちます。この記事では、PHP と JS の開発スキルを紹介し、株価ローソク足チャートの描画方法を読者に理解してもらい、具体的なコード例を示します。 1. 株のローソク足チャートを理解する 株のローソク足チャートの描き方を紹介する前に、まずローソク足チャートとは何かを理解する必要があります。ローソク足チャートは日本人が開発した

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

See all articles