彻底に6つの正規表現を使いこなす（1）

1. 正規表現を使う理由#

小さな例#

文字列があると仮定します。
const result="124ssabc33501fs"
今、その中の数字だけを取りたいとします。どうすればいいでしょうか？

もちろん、以下のように考えるかもしれません。

let r1=[...result].filter((item,index)=>!Number.isNAN(item)).join("")

たった 1 行ですが、まだ最もエレガントな方法ではありません。

正規表現を使うと、以下のように書くことができます。

console.log(result.match("/\d/g").join())

これにより、すべての数字が一致します。

正規表現の作成方法#

リテラル作成#

let oo="lhw"
console.log(/w/.test(oo)) // wの文字があるかどうかをテストする

しかし、もし w が変数だったらどうでしょうか？

let oo="lhw"
const h="h"
console.log(eval(`/${h}/`.test(oo)))

オブジェクト作成#

let oo="luhw"
let a="h"
let a2="\\w" //アンダースコアに一致
let a3="\\d" //数字に一致
let reg=new RegExp("u","g") //文字列に一致、グローバル
let reg2=new RegExp(a,"g") //リテラルよりも変数を受け入れる方が便利
reg.test(oo)

小さな例#

例えば、ユーザーがテキストを入力した場合、対応する div 内のテキストを置換します。

<div class="content">lhwwoc</div>
<script>
  let content=prompt("内容を入力してください")
  let reg=new RegExp(content,"g")
  const element=doucument.qureySelector(".content")
 // let str=content.replace(/\w/,str=>{})
 element.innerHtml.replace(reg,str=>{
   return `<span style="color:red">
             ${str}
         </span>`
 })
</script>

選択子#

論理演算子 || に似ています。

const str="newnewnwec"
console.log(/@|n/.test()) //true
console.log(/@|o/.test()) //false
console.log(/wne|n/.test()) //true

伏線#

電話番号が北京か上海かをチェックしたいとします。

/(010|020)\-\d{7,8}}/.test("010-12309721") //true

/(010|020)\-\d{7,8}}/.test("assd010-12309721") //false

先頭と末尾に制限がないことに気づきました。

次に説明します。

まず、アトムの概念を説明します。

let reg=/[123456]/
let age="18"
reg.test("1") //true
age.match(reg)  //["1"]が返されます。 //一致するものは1つだけです。

[] を () に変えると、
//

let reg=/(18|34|56)/
let age="18"
reg.test("1") //false
age.match(reg)  //["18","18",index:0]が返されます。