このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

正規表現 先読み後読み 論理積

JavaScript

2019.07.28

この記事は最終更新日から1年以上が経過しています。

どもです。

もうだいぶん前の話となるのですが忘れない為にも備忘録的な感じで。

以前、メンバーから「HTMLのstylesheet要素からパスを取得したい」といった話がありまして、そんな時は正規表現ですよね。

つまり、以下の様なソースから

<link rel="stylesheet" type="text/css" href="./assets/css/style.css">

または、

<link type="text/css" href="./assets/css/style.css" rel="stylesheet">

など、relの位置に関わらず、 hrefの「./assets/css/style.css」といった、パスのみを取得するのです。

で、メンバーが記述したソースは以下の様な感じ。

const matchList: any = line.match(/(?<=rel="stylesheet") href="([0-9a-zA-Z\:\-\.\/_]+)"|href="([0-9a-zA-Z\:\-\.\/_]+)"(?= rel="stylesheet")/);

うーん。間違いではない。

分かるのですがスマートではないですよね。。

正規表現なので、冗長(繰り返し記述)になってしまっているので、短くしたいでよね。

イメージとして、「href=….」 は、後方参照で、 「rel=”style…”」は、^や、 $をうまい使い分けで行けないのかなぁ。

といったイメージでした。(できるかどうかはさておき)

そこで、メンバーからは、「cssのパスのみreplace対象としたかったです。」と言う事。

以下の様に、どこに記述していても取得できるよう。

<link rel="stylesheet" href="./assets/css/style.css">
<link href="./assets/css/style.css" rel="stylesheet">

考えた結果、以下のソースになったと。(でしょうね)

  ↓

/(?<=rel="stylesheet") href="([0-9a-zA-Z\:\-\.\/_]+)"|href="([0-9a-zA-Z\:\-\.\/_]+)"(?= rel="stylesheet")/

  ↓

$1 = "./assets/css/style.css"

  ↓

<link rel="stylesheet" href="./assets/css/style.css?1548407079010">

そもそも、なぜパスを取得するかと言いますと、パスの後ろにタイムスタンプを付与し、キャッシュ無効にする為(ライブラリ)でした。

「ですが、replace内では、”./assets/css/style.css” のみをマッチさせようとしてもうまい正規表現ができませんでした。」

との事。

こんな変な置換とかになるとの事

<link ./assets/css/style.css?1548409972794>

そのため「matchで「 “./assets/css/style.css”」を抽出してからrelpaceを実行した。

との事。

もうちょいシンプルに行けるはず。とアドバイスしたところ。

「以前のものだと、$1と$2にcssパスが別れて取得が冗長なのを改善しました」

/<link .*href=["']([0-9a-zA-Z\:\-\.\/_]+.css)["']/i)

い、いや linkが増えちゃった。w

違うw

最後投げやりになってしまった感じw

と、レビューするものは、メンバーは「これでOK」と思っているソースに関してレビューし、リファクタリングして良くなりそうなものにはアドバイスが必要となります。

実際に記述するのではなく、「ヒント」を与えることが重要だと思っております。

そこで、意図を理解し、しっかりソースを記述できる人と、できない人で分かれると思うんですよね。

最終的に「できない」と判断した場合、自分が記述するようにしています。

ということで、出先だったので、スマホアプリで記述することに。

後方置換のイメージだったので。

(rel="stylesheet")? href="([0-9a-zA-Z\:\-\.\/_]+)"\s?($1)?

こんな感じなのかな。と想定。

実際にアプリで記述してみたところ、最初にマッチしないと、後方参照は厳しめなのが判明。

とりあえず、これで rel=~ をマッチしつつ、パスをキャプチャ出来るのですが、 rel=~ を上手く扱いたい。。

と、あれやこれやと試していたのですが、そもそも先読み後読みとか、後方参照とか、

ちょっと難しく考えすぎたみたいでした。。。

論理積で解決できることが判明しました。orz

^(?=.*href="([0-9a-zA-Z\:\-\.\/_]+))(?=.*rel="stylesheet")

最終的、「シングルクォート、ダブルクォート」を考慮した正規表現

^(?=.*href=["|']([0-9a-zA-Z\:\-\.\/_]+\.css))(?=.*rel=["|']stylesheet["|'])

もう忘れかけていたので、備忘録です。

用いたiPhoneアプリやWebサービス

iPhone App

RegEx Lab: Regular Expressions

詳細リンク

https://apps.apple.com/us/app/regex-lab-regular-expressions/id1252988123

無料で利用できて良いです。

webサービス

Rubular: a Ruby regular expression editor and tester

http://www.rubular.com/

Ruby専用なのですが、いくつか利用している中でも、結果後が見やすいので使用してます。

正規表現といえばこの本!

created by Rinker
¥5,280 (2020/07/05 16:48:30時点 Amazon調べ-詳細)

定番といえば定番かもしれませんが、この本を読んで「正規表現」に対する理解が深まった気がします。

この本はおすすめです。

10年前よりかは「得意」にはなった気がしますが、今回書いたような記述がもっとパッと記述できるようにまだまだ勉強不足ですね。。

日々がんばります。

ではではぁ。

Comment

Related Article

OAuthのフローを可視化できるツールを作ってみました。

2020.05.17

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

2020.01.31

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

2020.01.24

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

2019.10.21

正規表現 先読み後読み 論理積

2019.07.28

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

2019.06.22

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

2019.03.24

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

2019.02.21

CATEGORY LIST

LATEST NEWS

Mac Home brewでSDL2.0を簡単に環境設定

C

2020.06.24

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その3

Python

2020.06.14

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その2

Python

2020.06.08

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その1

Python

2020.06.07

このコロナ禍で、飛沫感染防止など求められる中「電子メモパッド」が重宝。 1300円で購入可能な電子メモパッドが超絶便利な件。

tool

2020.06.02

OAuthのフローを可視化できるツールを作ってみました。

JavaScript

2020.05.17

Django django-allauthで、サクッとソーシャルログイン機能を実装

Python

2020.04.12

部下を育てる技術

イベント

2020.04.08

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

JavaScript

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

JavaScript

2020.01.31

まだ間に合う!!ラズベリーパイ購入なら「RSコンポーネンツ」で!最大40%オフの年に1度の大特価期末セール中!

RaspberryPi

2020.01.25

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

JavaScript

2020.01.24

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US