サイゼントの技術ブログ – Just another WordPress site

2021年4月14日

Chromeの拡張機能を使用した文字列置換

以前の記事で、URLからJavaScriptを読みこむことでブラウザに表示される文字の変換を試みました。
しかし、URLから読み込ませる方法だと、大量の文字列置換はできません。

そこで、今回はChromeの拡張機能を使用した文字列置換を試みました。
以下、サンプルコードです。

manifest.jsonは、「https://developer.mozilla.org/ja/docs/Web/JavaScript」にアクセスした際に「content.js」が実行される記述としています。
最小限の記述であるため、実際に配布する際には説明を入れたりアイコンをつけたりすると良いでしょう。

【構成】

test┳manifest.json
　　┗content.js

1 2	test┳manifest.json 　　┗content.js

【サンプルコード】

・manifest.json

{
  "name": "test",
  "version": "1.0.0",
  "manifest_version": 2,
  "content_scripts": ［{
    "matches": ［"https://developer.mozilla.org/ja/docs/Web/JavaScript"］,
    "js": ［
      "content.js"
    ］
  }］
}

{

"name": "test",

"version": "1.0.0",

"manifest_version": 2,

"content_scripts": ［{

"matches": ［"https://developer.mozilla.org/ja/docs/Web/JavaScript"］,

"js": ［

"content.js"

］

}］

}

・content.js

document.body.innerHTML=document.body.innerHTML.replace(/JavaScript/g,'［JavaScript］');
document.body.innerHTML=document.body.innerHTML.replace(/ECMAScript/g,'［ECMAScript］');

1 2	document.body.innerHTML=document.body.innerHTML.replace(/JavaScript/g,'［JavaScript］'); document.body.innerHTML=document.body.innerHTML.replace(/ECMAScript/g,'［ECMAScript］');

【動作確認】

１．Chromeを開き、下記から「拡張機能の管理」を選択

２．「デベロッパーモード」をONにし、「パッケージ化されていない拡張機能を読み込む」を選択

３．サンプルコードが存在するフォルダを選択

４．manifest.jsonに記述したサイトにアクセスすると、自動で文字列置換が行われる

５．取り込んだ拡張機能の削除は、「Chromeから削除」を選択することで行う

いかがでしたでしょうか？

今回は文字列置換を例として挙げましたが、他にも、リンクの埋め込み、広告の削除、といったことが可能です。
Chromeの拡張機能は既に色々な機能が公開されていますので、どのようなことができるのかを既存の拡張機能を見て調べても良いかもしれません。

2021年4月9日

JavaScript：thisの挙動と用途

JavaScriptの初心者を悩ます文法の一つとして、thisが挙げられます。
thisが何を指しているのか、どのような場合に使われるのか、なかなかイメージが難しいと思います。

この記事では、その疑問について答えていきたいと思います。

今回の記事では、サンプルコードの実行はNode.jsで行います。
また、非Strictモード（’use strict’を宣言したりexport句でStrictモードに変更したりしない場合）を前提とします。
（Strictモードの場合は、thisによりグローバルオブジェクトを参照しようとした場合にundefinedになります）

１．thisキーワードの説明

「this」の説明の前に、JavaScriptとオブジェクトの関係について簡単に説明します。
JavaScriptは、必ずオブジェクトの中で実行する必要があります。
実行環境（ブラウザやNode.js）は「グローバルオブジェクト」と呼ばれるオブジェクトを用意しており、自分でオブジェクトを定義しない場合はグローバルオブジェクトから各々の処理が実行されています。
（ブラウザの場合のグローバルオブジェクトは「window」、Node.jsの場合のグローバルオブジェクトは「global」となります）

「this」キーワードは、記述箇所を動かしているオブジェクトを参照します。
自分で定義したオブジェクトから記述箇所を呼び出している場合はそのオブジェクト、そうではない場合はグローバルオブジェクトを返します。

【サンプルコード】

function func1() {
  console.log(this); // 関数を呼び出しているオブジェクトを参照
}
func1(); // グローバルオブジェクトの関数を実行
let obj = {}; // 独自のオブジェクト定義
obj.func = func1; // 独自のオブジェクトに関数を定義
obj.func(); // 独自のオブジェクトの関数を実行

function func1() {

console.log(this); // 関数を呼び出しているオブジェクトを参照

}

func1(); // グローバルオブジェクトの関数を実行

let obj = {}; // 独自のオブジェクト定義

obj.func = func1; // 独自のオブジェクトに関数を定義

obj.func(); // 独自のオブジェクトの関数を実行

【実行結果】

・１回目の関数呼び出し

Object ［global］ {
  global: ［Circular］,
  clearInterval: ［Function: clearInterval］,
  clearTimeout: ［Function: clearTimeout］,
  setInterval: ［Function: setInterval］,
  setTimeout: ［Function: setTimeout］ {
    ［Symbol(nodejs.util.promisify.custom)］: ［Function］
  },
  queueMicrotask: ［Function: queueMicrotask］,
  clearImmediate: ［Function: clearImmediate］,
  setImmediate: ［Function: setImmediate］ {
    ［Symbol(nodejs.util.promisify.custom)］: ［Function］
  }
}

Object ［global］ {

global: ［Circular］,

clearInterval: ［Function: clearInterval］,

clearTimeout: ［Function: clearTimeout］,

setInterval: ［Function: setInterval］,

setTimeout: ［Function: setTimeout］ {

［Symbol(nodejs.util.promisify.custom)］: ［Function］

queueMicrotask: ［Function: queueMicrotask］,

clearImmediate: ［Function: clearImmediate］,

setImmediate: ［Function: setImmediate］ {

［Symbol(nodejs.util.promisify.custom)］: ［Function］

}

・２回目の関数呼び出し

{ func: ［Function: func1］ }

1	{ func: ［Function: func1］ }

２．callやapplyを用いて関数呼び出しした場合のthisの参照先

関数をメソッドチェーンで「call」や「apply」と繋ぐことで、呼び出される関数の中でthisが参照するオブジェクトを指定することができます。
オブジェクトの指定は「call」や「apply」の第一引数で行います。

また、「call」や「apply」は第二引数以降も指定が可能です。
第二引数以降では、関数呼び出しの際の引数を指定することができ、呼び出される関数の中では「arguments」キーワードでそれを受け取ることができます。
「call」は第二引数、第三引数、第四引数…といった具合に変数を一つずつ定義し、「apply」は第二引数に配列形式でまとめて変数を定義します。

【サンプルコード１】

function func1() {
  console.log(this);
}
let obj = {hoge: "hoge"};
func1.call(obj); // this=objと結びつけることができる。
func1.apply(obj); // 同上

function func1() {

console.log(this);

}

let obj = {hoge: "hoge"};

func1.call(obj); // this=objと結びつけることができる。

func1.apply(obj); // 同上

【実行結果１】

・１回目の関数呼び出し

{ hoge: 'hoge' }

1	{ hoge: 'hoge' }

・２回目の関数呼び出し

{ hoge: 'hoge' }

1	{ hoge: 'hoge' }

【サンプルコード２】

function func1() {
  console.log(this);
  for (var i = 0; i ＜ arguments.length; i++) {
    console.log(arguments［i］);
  };
}
let obj = {hoge: "hoge"};
func1.call(obj, "Hello", "World!"); // 引数を１つずつ指定
func1.apply(obj, ［"Hello", "World!"］); // 引数を１つの配列で指定

function func1() {

console.log(this);

for (var i = 0; i ＜ arguments.length; i++) {

console.log(arguments［i］);

};

}

let obj = {hoge: "hoge"};

func1.call(obj, "Hello", "World!"); // 引数を１つずつ指定

func1.apply(obj, ［"Hello", "World!"］); // 引数を１つの配列で指定

【実行結果２】

・１回目の関数呼び出し

{ hoge: 'hoge' }
Hello
World!

{ hoge: 'hoge' }

Hello

World!

・２回目の関数呼び出し

{ hoge: 'hoge' }
Hello
World!

{ hoge: 'hoge' }

Hello

World!

３．bindを用いたthisの参照先変更

関数をメソッドチェーンで「bind」と繋ぐことで、thisの参照先を強制的に結びつけた新たな関数を定義できます。
結びつけるオブジェクトは第一引数で定義します。

【サンプルコード】

function func1() {
  console.log(this);
}
let obj = {hoge: "hoge"};
let func2 = func1.bind(obj); // thisを強制的に結び付けて新たな関数を定義
func2();

function func1() {

console.log(this);

}

let obj = {hoge: "hoge"};

let func2 = func1.bind(obj); // thisを強制的に結び付けて新たな関数を定義

func2();

【実行結果】

{ hoge: 'hoge' }

1	{ hoge: 'hoge' }

４．アロー関数で関数定義した場合のthisの参照先

アロー関数で関数を定義した場合は、thisの参照先は固定になります。関数を定義した時点のオブジェクトを指すようになります。

【サンプルコード】

let func1 = () =＞ { // アロー演算子で関数を定義
  console.log(this); // この場合は、定義時点の呼び出し元オブジェクトでthisを決定
}
func1(); // グローバルオブジェクトから呼び出してもthisは空のオブジェクトを指す
let obj = {};
obj.func = func1;
obj.func(); // 独自のオブジェクトから呼び出してもthisは空のオブジェクトを指す

let func1 = () =＞ { // アロー演算子で関数を定義

console.log(this); // この場合は、定義時点の呼び出し元オブジェクトでthisを決定

}

func1(); // グローバルオブジェクトから呼び出してもthisは空のオブジェクトを指す

let obj = {};

obj.func = func1;

obj.func(); // 独自のオブジェクトから呼び出してもthisは空のオブジェクトを指す

【実行結果】

・１回目の関数呼び出し

{}

{}

・２回目の関数呼び出し

{}

{}

thisは、どのオブジェクトから呼び出されたかによって挙動を変えたい時に使用することが多いです。
ポリモーフィズムを実現するために使用する、と言った方がわかりやすいかもしれません。
また、今回の例では取り上げていませんが、関数を定義したオブジェクトを渡せばコールバック処理も可能です。

以下のサンプルコードは、呼び出したオブジェクトの名前を参照する例であり、どのオブジェクトから呼び出したかによって挙動を変えることができています。

【サンプルコード】

function func1() {
  console.log(this.name); // 呼び出したオブジェクト毎で違う名前を表示
}
let obj1 = {name: "hoge"};
let obj2 = {name: "fuga"};
func1.call(obj1);
func1.call(obj2);

function func1() {

console.log(this.name); // 呼び出したオブジェクト毎で違う名前を表示

}

let obj1 = {name: "hoge"};

let obj2 = {name: "fuga"};

func1.call(obj1);

func1.call(obj2);

【実行結果】

・１回目の関数呼び出し

hoge

hoge

・２回目の関数呼び出し

fuga

fuga

いかがでしたでしょうか？

JavaScriptのthisは混乱しやすい文法ですが、JavaScriptはグローバルオブジェクトの元で実行されること、通常は呼び出し元のオブジェクトを指すこと、「call」「apply」「bind」キーワードやアロー演算子によりthisが指す先が変わること、を覚えておけば、thisを理解できるのではないかと思います。

JavaScript独自の文法については、これからの紹介していきたいと思います！

2021年4月1日

JavaScript：Strictモードとは

JavaScriptには「Strictモード」と呼ばれるモードが用意されています。
Strictモードにすることで、バグに気付かずに実行が継続されるのを防ぎやすくなり、高速化することもあります。

詳しくはMozillaのページに書かれていますが、この記事では簡単に紹介したいと思います。

Strictモードに設定するためには、以下の２つの方法があります。
（export句を使用した方法もありますが、この記事では割愛します）

１．スクリプト全体で定義

スクリプトの最初に「’use strict’;」を記述することで、そのスクリプト全体がStrictモードになります。

・サンプルコード

'use strict'; // スクリプトの最初で定義、スクリプト全体がstrictモード
console.log("Hello world!");

1 2	'use strict'; // スクリプトの最初で定義、スクリプト全体がstrictモード console.log("Hello world!");

２．関数全体で定義

関数の最初に「’use strict’;」を記述することで、その関数全体がStrictモードになります。

・サンプルコード

function hoge() {
  'use strict'; // 関数の最初で定義、関数全体がstrictモード
  console.log("Hello world!");
}
// 関数の外はstrictモードではない
hoge();

function hoge() {

'use strict'; // 関数の最初で定義、関数全体がstrictモード

console.log("Hello world!");

}

// 関数の外はstrictモードではない

hoge();

Strictモードに設定することで、例えば以下のような挙動変更が行われます。

１．バグになりやすい誤りがある場合に異常終了させる

例えば、定義済みの変数を参照しようとして変数名の記述を誤った場合、Strictモードの場合は異常終了させることができます。

・サンプルコード（非Strictモード）

// 'use strict';
let hoge = "definition";
hage = "Hello world!";
console.log(hoge);

// 'use strict';

let hoge = "definition";

hage = "Hello world!";

console.log(hoge);

・実行結果（非Strictモード）

C:\tmp＞node hello.js
definition

C:\tmp＞

C:\tmp＞node hello.js

definition

C:\tmp＞

・サンプルコード（Strictモード）

'use strict';
let hoge = "definition";
hage = "Hello world!";
console.log(hoge);

'use strict';

let hoge = "definition";

hage = "Hello world!";

console.log(hoge);

・実行結果（Strictモード）

C:\tmp＞node hello.js
C:\tmp\hello.js:3
hage = "Hello world!";
     ^

ReferenceError: hage is not defined
    at Object.&lt;anonymous> (C:\tmp\hello.js:3:6)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint &#91;as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47

C:\tmp＞

C:\tmp＞node hello.js

C:\tmp\hello.js:3

hage = "Hello world!";

ReferenceError: hage is not defined

at Object.<anonymous> (C:\tmp\hello.js:3:6)

at Module._compile (internal/modules/cjs/loader.js:1137:30)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)

at Module.load (internal/modules/cjs/loader.js:985:32)

at Function.Module._load (internal/modules/cjs/loader.js:878:14)

at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)

at internal/main/run_main_module.js:17:47

C:\tmp＞

２．セキュリティーの強化

JavaScriptでは、必ずオブジェクトを用意する必要があり、自分でオブジェクトを定義しない場合は「グローバルオブジェクト」と呼ばれるブラウザや実行環境が用意したオブジェクトが使用されます。
また、キーワード「this」を使用することで、記述箇所を動かしているオブジェクトの情報を取得することができます。
「this」によりグローバルオブジェクトを参照された場合、セキュリティー上の問題が発生する可能性があるため、Strictモードではグローバルオブジェクトが参照されるようなケースで「this」キーワードは「undefined」を返すようになります。

・サンプルコード（非Strictモード）

//'use strict';
function hoge() {
  console.log(this); // 関数を呼び出しているオブジェクトを参照
}
hoge(); // グローバルオブジェクトの関数を実行
let hello = {}; // 独自のオブジェクト定義
hello.hoge = hoge; // 独自のオブジェクトに関数を定義
hello.hoge(); // 独自のオブジェクトの関数を実行

//'use strict';

function hoge() {

console.log(this); // 関数を呼び出しているオブジェクトを参照

}

hoge(); // グローバルオブジェクトの関数を実行

let hello = {}; // 独自のオブジェクト定義

hello.hoge = hoge; // 独自のオブジェクトに関数を定義

hello.hoge(); // 独自のオブジェクトの関数を実行

・実行結果（非Strictモード）

C:\tmp＞node hello.js
Object ［global］ {
  global: ［Circular］,
  clearInterval: ［Function: clearInterval］,
  clearTimeout: ［Function: clearTimeout］,
  setInterval: ［Function: setInterval］,
  setTimeout: ［Function: setTimeout］ {
    ［Symbol(nodejs.util.promisify.custom)］: ［Function］
  },
  queueMicrotask: ［Function: queueMicrotask］,
  clearImmediate: ［Function: clearImmediate］,
  setImmediate: ［Function: setImmediate］ {
    ［Symbol(nodejs.util.promisify.custom)］: ［Function］
  }
}
{ hoge: ［Function: hoge］ }

C:\tmp＞

C:\tmp＞node hello.js

Object ［global］ {

global: ［Circular］,

clearInterval: ［Function: clearInterval］,

clearTimeout: ［Function: clearTimeout］,

setInterval: ［Function: setInterval］,

setTimeout: ［Function: setTimeout］ {

［Symbol(nodejs.util.promisify.custom)］: ［Function］

queueMicrotask: ［Function: queueMicrotask］,

clearImmediate: ［Function: clearImmediate］,

setImmediate: ［Function: setImmediate］ {

［Symbol(nodejs.util.promisify.custom)］: ［Function］

}

{ hoge: ［Function: hoge］ }

C:\tmp＞

・サンプルコード（Strictモード）

'use strict';
function hoge() {
  console.log(this); // 関数を呼び出しているオブジェクトを参照
}
hoge(); // グローバルオブジェクトの関数を実行
let hello = {}; // 独自のオブジェクト定義
hello.hoge = hoge; // 独自のオブジェクトに関数を定義
hello.hoge(); // 独自のオブジェクトの関数を実行

'use strict';

function hoge() {

console.log(this); // 関数を呼び出しているオブジェクトを参照

}

hoge(); // グローバルオブジェクトの関数を実行

let hello = {}; // 独自のオブジェクト定義

hello.hoge = hoge; // 独自のオブジェクトに関数を定義

hello.hoge(); // 独自のオブジェクトの関数を実行

・実行結果（Strictモード）

C:\tmp＞node hello.js
undefined
{ hoge: ［Function: hoge］ }

C:\tmp＞

C:\tmp＞node hello.js

undefined

{ hoge: ［Function: hoge］ }

C:\tmp＞

３．将来（最新）のJavaScriptの仕様に対応する

例えば、キーワード「private」は、2021/03/31現在でいくつかのブラウザやNode.jsでは使用可能です。
非Strictモードではこのキーワードを変数名として使用できますが、Strictモードではエラーにできます。

・サンプルコード（非Strictモード）

// 'use strict';
let private = "Hello world!";
console.log(private);

// 'use strict';

let private = "Hello world!";

console.log(private);

・実行結果（非Strictモード）

C:\tmp＞node hello.js
Hello world!

C:\tmp＞

C:\tmp＞node hello.js

Hello world!

C:\tmp＞

・サンプルコード（Strictモード）

'use strict';
let private = "Hello world!";
console.log(private);

'use strict';

let private = "Hello world!";

console.log(private);

・実行結果（Strictモード）

C:\tmp＞node hello.js
C:\tmp\hello.js:2
let private = "Hello world!";
^^^

SyntaxError: Unexpected strict mode reserved word
    at wrapSafe (internal/modules/cjs/loader.js:1053:16)
    at Module._compile (internal/modules/cjs/loader.js:1101:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint ［as runMain］ (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47

C:\tmp＞

C:\tmp＞node hello.js

C:\tmp\hello.js:2

let private = "Hello world!";

^^^

SyntaxError: Unexpected strict mode reserved word

at wrapSafe (internal/modules/cjs/loader.js:1053:16)

at Module._compile (internal/modules/cjs/loader.js:1101:27)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)

at Module.load (internal/modules/cjs/loader.js:985:32)

at Function.Module._load (internal/modules/cjs/loader.js:878:14)

at Function.executeUserEntryPoint ［as runMain］ (internal/modules/run_main.js:71:12)

at internal/main/run_main_module.js:17:47

C:\tmp＞

いかがでしたでしょうか？

元々はthisの挙動について書こうと思っていたのですが、thisの挙動はStrictモードによっても変化するので、先にStrictモードについて書きました。
JavaScriptの弱点としてエラーで落ちて欲しい場面で落ちない（その結果誤りに気付くのが遅くなる）というものがあると思いますが、Strictモードはその弱点を埋めるのに良い機能だと思いました。

2021年3月25日

ブラウザで表示される文字列をJavaScriptのURLを読ませて置換する

ブラウザで表示される文字列について、お気に入りからJavaScriptを読みこませることで置換することができます。
例えば、強調表示したいような場合にこれを活用できます。

例として、mozillaのJavaScriptのページを強調表示してみましょう。

https://developer.mozilla.org/ja/docs/Web/JavaScript

今回の例では、「JavaScript」と「ECMAScript」を強調表示します。

１．お気に入りにJavaScriptを登録する

Chromeの場合は以下のような手順になります。

・ブックマークマネージャーを開く

・右クリックで新しいブックマークを作成する

・ブックマークのURLにJavaScriptを記述する

javascript:(function(){document.body.innerHTML=document.body.innerHTML.replace(/JavaScript/g,'［JavaScript］');document.body.innerHTML=document.body.innerHTML.replace(/ECMAScript/g,'［ECMAScript］');})()

1	javascript:(function(){document.body.innerHTML=document.body.innerHTML.replace(/JavaScript/g,'［JavaScript］');document.body.innerHTML=document.body.innerHTML.replace(/ECMAScript/g,'［ECMAScript］');})()

２．任意のページでブックマークを開く

今回の例では、このようなページが

ブックマークを開くことでこのように強調表示されます。

このように手軽にブラウザの表示の文字列置換が可能なのですが、この方法では大量の文字列置換ができないことに注意する必要があります。
少なくとも、筆者の環境（OS：Windows8.1、ビット数：64、メモリ：8GB、Chromeバージョン: 88.0.4324.150）では、1000通りの文字列置換を行うことはできませんでした。
（恐らく、ブラウザ毎に設けられているURLの文字数制限によるものです）
これが問題になるのであれば、Chromeの拡張機能を開発する等の別の方法を考えた方が良いです。

また、文字列置換によりリンク先が変わってしまうことにも注意が必要です。
（逆に、これを利用して、意図的にリンク先を変えることはできそうです）

いかがでしたでしょうか。

大量の記述に対応できないため、今回紹介した方法は不便に感じることがあるかもしれませんが、最も手軽な方法でもあります。
ちょっとした処理を実行したい場合には便利でしょう。

Chromeの拡張機能については、近日中に別の記事で紹介したいと思います！

2021年3月19日

JavaScript：matchメソッドで文字列抽出を行う

JavaScriptのmatchメソッドは戻り値に特徴があり、戻り値を利用して文字列抽出もできるようになっています。
今回は、文字列抽出の方法を紹介していきます。

matchメソッド（String.match）では、引数で与えた文字列が含まれるかどうかを返すメソッドです。
引数で与える文字列には、正規表現を使用することも可能です。

引数で与えた文字列が含まれない場合には、以下のようにnullが返却されます。

【サンプルコード】

・test.js

const str = 'hoge1fuga2';
const ret = str.match(/piyo/);
console.log("■戻り値全体を参照");
console.log(ret);

const str = 'hoge1fuga2';

const ret = str.match(/piyo/);

console.log("■戻り値全体を参照");

console.log(ret);

【実行結果】

c:\tmp＞node test.js
■戻り値全体を参照
null

c:\tmp＞node test.js

■戻り値全体を参照

null

含まれる場合は、以下のように色々な情報が返却されます。
配列で返却され、一致した箇所を抜きだした文字列が添字0の要素に格納されます。
また、indexキーには一致した文字列が何文字目に存在するか、inputキーには走査対象とする元々の文字列が格納されます。
groupsキーについては後述します。

【サンプルコード】

・test.js

const str = 'hoge1fuga2';
const ret = str.match(/fuga/);
console.log("■戻り値全体を参照");
console.log(ret);
console.log("■一致した文字列のみ参照");
console.log(ret［0］);

const str = 'hoge1fuga2';

const ret = str.match(/fuga/);

console.log("■戻り値全体を参照");

console.log(ret);

console.log("■一致した文字列のみ参照");

console.log(ret［0］);

【実行結果】

c:\tmp＞node test.js
■戻り値全体を参照
［ 'fuga', index: 5, input: 'hoge1fuga2', groups: undefined ］
■一致した文字列のみ参照
fuga

c:\tmp＞node test.js

■戻り値全体を参照

［ 'fuga', index: 5, input: 'hoge1fuga2', groups: undefined ］

■一致した文字列のみ参照

fuga

matchメソッドの引数では、gオプションを指定することが可能です。
gオプションを指定すると、一致する文字列を見つけても走査を続け、一致する文字列を全て抜き出すという動きになります。
戻り値の形式もgオプション指定時には変更され、以下のように一致した全ての文字列が添字0の要素、添字1の要素…に格納されます。

【サンプルコード】

・test.js

const str = 'hoge1fuga2';
const ret = str.match(/［0-9］/g);
console.log("■戻り値全体を参照");
console.log(ret);
console.log("■１つ目の一致した文字列のみ参照");
console.log(ret［0］);

const str = 'hoge1fuga2';

const ret = str.match(/［0-9］/g);

console.log("■戻り値全体を参照");

console.log(ret);

console.log("■１つ目の一致した文字列のみ参照");

console.log(ret［0］);

【実行結果】

c:\tmp＞node test.js
■戻り値全体を参照
［ '1', '2' ］
■１つ目の一致した文字列のみ参照
1

c:\tmp＞node test.js

■戻り値全体を参照

［ '1', '2' ］

■１つ目の一致した文字列のみ参照

matchメソッドの引数で使用できる正規表現には、キャプチャグループというものが存在します。
キャプチャグループとは、”()”で囲った箇所をグループ化するというもので、抽出条件には影響しませんが、抽出結果をグループ分けすることができます。
キャプチャグループが存在する場合は、添字1の要素に1つ目のキャプチャグループ、添字2の要素に2つ目のキャプチャグループ…といった具合に、戻り値でキャプチャグループの箇所を抽出することができるようになります。
キャプチャグループを使用することで、柔軟な文字列抽出が可能になります。

【サンプルコード】

・test.js

const str = 'hoge1fuga2';
const ret = str.match(/(fuga)(［0-9］)/);
console.log("■戻り値全体を参照");
console.log(ret);
console.log("■２つ目のキャプチャグループのみ参照");
console.log(ret［2］);

const str = 'hoge1fuga2';

const ret = str.match(/(fuga)(［0-9］)/);

console.log("■戻り値全体を参照");

console.log(ret);

console.log("■２つ目のキャプチャグループのみ参照");

console.log(ret［2］);

【実行結果】

c:\tmp＞node test.js
■戻り値全体を参照
［
  'fuga2',
  'fuga',
  '2',
  index: 5,
  input: 'hoge1fuga2',
  groups: undefined
］
■２つ目のキャプチャグループのみ参照
2

c:\tmp＞node test.js

■戻り値全体を参照

［

'fuga2',

'fuga',

'2',

index: 5,

input: 'hoge1fuga2',

groups: undefined

］

■２つ目のキャプチャグループのみ参照

キャプチャグループには名前を付けることができます。
“(…)”を”(?…)”とすることで、名前を付けることができます。
“<“と”>”で囲った箇所が、キャプチャグループの名前になります。
名前付きキャプチャグループを使用している場合は、戻り値のgroupsキーで抽出が可能になります。

【サンプルコード】

・test.js

const str = 'hoge1fuga2';
const ret = str.match(/fuga(?＜digit＞［0-9］)/);
console.log("■戻り値全体を参照");
console.log(ret);
console.log("■名前付きキャプチャグループのみ参照");
console.log(ret.groups.digit);

const str = 'hoge1fuga2';

const ret = str.match(/fuga(?＜digit＞［0-9］)/);

console.log("■戻り値全体を参照");

console.log(ret);

console.log("■名前付きキャプチャグループのみ参照");

console.log(ret.groups.digit);

【実行結果】

c:\tmp＞node test.js
■戻り値全体を参照
［
  'fuga2',
  '2',
  index: 5,
  input: 'hoge1fuga2',
  groups: ［Object: null prototype］ { digit: '2' }
］
■名前付きキャプチャグループのみ参照
2

c:\tmp＞node test.js

■戻り値全体を参照

［

'fuga2',

'2',

index: 5,

input: 'hoge1fuga2',

groups: ［Object: null prototype］ { digit: '2' }

］

■名前付きキャプチャグループのみ参照

いかがでしたでしょうか。

“match”という単語だけを見ると「文字列が一致することを確認する」というイメージを持つと思いますが、実際にはこのように文字列抽出も可能なメソッドです。
そのことを知らずに他の人が書いたソースコードを読むと戸惑うことがある（少なくとも私は戸惑った）ので、「matchメソッドは文字列の一致の確認だけでなく文字列の抽出も行う」ということだけでも覚えておくと良いでしょう。