【JavaScript】正規表現でパターンマッチする文字列を置換する！

エンジニアに特化した転職エージェント！

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談！

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します！

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています！

転職エージェントに迷っている方、まずは無料でキャリア相談から！

エンジニア特化の転職支援【キッカケエージェント】

(この記事は2023年10月26日に投稿されました。)

JavaScriptでは、正規表現を利用することで、パターンにマッチする文字列を別の文字列へと置換することができます。

文字列を置換するにはreplace()やreplaceAll()の対象の文字列に正規表現を指定します。

そのため、無数に存在する文字列のパターンを全て対象の文字列にすることができ、指定した文字列へ置換することができます。

また、繰り返し処理を利用することで、配列に格納されている要素を置換対象とすることができます。

以上のことから無数に存在するパターンでも1つにまとめで表現できるため、もし正規表現の置換についてまだ覚えていない場合はこの記事を読んで覚えておきましょう。

今回はJavaScriptの正規表現でパターンマッチする文字列を置換する方法について紹介していきます。

この記事はこんな方におすすめ

正規表現とは

正規表現とは、いくつかの文字列をパターンでマッチするよう一つの形式で表現するための方法となります。

例えば、「[A-Z{3}]とする場合、「AからZの3文字」となるため、「ABC」や「CVB」や「ZXS」などがマッチングします。

もし、正規表現の書き方や使い方について詳しくしたい場合は下記の記事をご参照ください。

Sossyの助太刀ブログ

10月 23, 2023

【JavaScript】正規表現とは？書き方や使い方について解説！

https://sossy-blog.com/useful/11284/

正規表現でパターンマッチする文字列を置換するには

正規表現でパターンマッチする文字列を置換するには下記のメソッドを使用します。

replace()
replaceAll()

replace()とは、対象の文字列を指定した文字列に置換するメソッドになります。

また、replaceAll()とは対象の文字列全てを指定した文字列に一括で置換するメソッドになります。

そのため、下記のようにreplace()やreplaceAll()の引数に正規表現を指定することで、正規表現でパターンマッチする文字列を置換することができます。

対象の文字列.replace(正規表現, 新しい文字列);

対象の文字列.replaceAll(正規表現, 新しい文字列);

対象の文字列.replace(正規表現, 新しい文字列);

対象の文字列.replaceAll(正規表現, 新しい文字列);

もし、replace()ついて詳しくしたい場合は下記の記事をご参照ください。

Sossyの助太刀ブログ

10月 10, 2022

【JavaScript】replace()で指定した文字列を別の文字列に置き換える！

https://sossy-blog.com/useful/6283/

正規表現でパターンマッチする文字列を置換するサンプルコード

正規表現でパターンマッチする文字列を置換するサンプルコードをご紹介します。

ここでは、下記の2つのパターンで正規表現による文字列の置換を行います。

正規表現の文字列が見つかる場合
正規表現の文字列が見つからない場合

正規表現の文字列が見つかる場合

正規表現の文字列が見つかる場合は、パターンにマッチングした文字列を指定した文字列に置換します。

● main.js

console.log("● 対象の文字列-1")
let str1 = 'アルファベットABCDEFGHIJKLMN'
console.log(str1)

console.log("● replace()使用後-1")
let reg1 = /[A-Z]{3}/
let ret1 = str1.replace(reg1, '**')
console.log(ret1)

console.log("● 対象の文字列-2")
let str2 = 'アルファベットabcdefghijklmn'
console.log(str2)

console.log("● replace()使用後-2")
let reg2 = /[a-z]{8}/
let ret2 = str2.replace(reg2, '****')
console.log(ret2)

console.log("● 対象の文字列-1")

let str1 = 'アルファベットABCDEFGHIJKLMN'

console.log(str1)

console.log("● replace()使用後-1")

let reg1 = /[A-Z]{3}/

let ret1 = str1.replace(reg1, '**')

console.log(ret1)

console.log("● 対象の文字列-2")

let str2 = 'アルファベットabcdefghijklmn'

console.log(str2)

console.log("● replace()使用後-2")

let reg2 = /[a-z]{8}/

let ret2 = str2.replace(reg2, '****')

console.log(ret2)

実行結果

replace()で対象の文字列を正規表現で置換しています。

今回は、「AからZの3文字」と「aからzの8文字」の正規表現としているため、「大文字のアルファベット3文字」と「小文字のアルファベット8文字」の文字列が置換対象となります。

そのため、「ABC」が「**」に、「abcdefgh」が「****」となって表示されています。

正規表現の文字列が見つからない場合

正規表現の文字列が見つからない場合は、置換しないでそのままの文字列を返します。

● main.js

console.log("● 対象の文字列")
let str1 = 'アルファベットABCDEFGHIJKLMN'
console.log(str1)

console.log("● replace()使用後")
let reg1 = /[a-z]{3}/
let ret1 = str1.replace(reg1, '**')
console.log(ret1)

console.log("● 対象の文字列")

let str1 = 'アルファベットABCDEFGHIJKLMN'

console.log(str1)

console.log("● replace()使用後")

let reg1 = /[a-z]{3}/

let ret1 = str1.replace(reg1, '**')

console.log(ret1)

実行結果

replace()で対象の文字列を正規表現で置換しています。

今回は、「aからzの3文字」の正規表現としているため、「小文字のアルファベット3文字」の文字列が置換対象となります。

そのため、置換対象の文字列が見つからず、文字列がそのまま表示されています。

正規表現でパターンマッチする文字列を一括で置換する場合

正規表現でパターンマッチする文字列を一括で置換するには正規表現のオプションに「g」を指定します。

正規表現のオプションである「g」はグローバル検索であり、パターンマッチするすべての文字列を対象にすることができます。

そのため、正規表現でパターンマッチする文字列を一括で置換することが可能になります。

また、replace()だけでなく、replaceAll()を使用することでも対象の文字列を一括で置換することが可能になります。

● main.js

console.log("● 対象の文字列-1")
let str1 = 'アルファベットABCDEFGHIJKLMN'
console.log(str1)

console.log("● replace()使用後")
let reg1 = /[A-Z]{3}/g
let ret1 = str1.replace(reg1, '**')
console.log(ret1)

console.log("● 対象の文字列-2")
let str2 = 'アルファベットabcdefghijklmn'
console.log(str2)

console.log("● replaceAll()使用後")
let reg2 = /[A-Z]{4}/gi
let ret2 = str2.replaceAll(reg2, '****')
console.log(ret2)

console.log("● 対象の文字列-1")

let str1 = 'アルファベットABCDEFGHIJKLMN'

console.log(str1)

console.log("● replace()使用後")

let reg1 = /[A-Z]{3}/g

let ret1 = str1.replace(reg1, '**')

console.log(ret1)

console.log("● 対象の文字列-2")

let str2 = 'アルファベットabcdefghijklmn'

console.log(str2)

console.log("● replaceAll()使用後")

let reg2 = /[A-Z]{4}/gi

let ret2 = str2.replaceAll(reg2, '****')

console.log(ret2)

実行結果

正規表現でパターンマッチする文字列を一括で置換しています。

今回は、「AからZの3文字」と「A-Zの4文字(大文字小文字の区別なし)」の正規表現としているため、「大文字のアルファベット3文字」と「大文字小文字のアルファベット4文字」の文字列が置換対象となります。

そのため、「ABC」と「DEF」と「GHI」と「JKL」が「**」となり、「abcd」と「efgh」と「ijkl」が「****」となって表示されています。

replaceAll()の場合は、正規表現のオプションにgを指定しないとエラーになりますので注意してください。

正規表現でパターンマッチングする文字列を置換する実際のケース

正規表現でパターンマッチングする文字列を置換する実際のケースについてご紹介します。

ここでは、正規表現による文字列の置換を下記の3ケースで使用します。

文字列内の単語を変換する場合
フォーマットを変更する場合
HTMLタグの削除を行う場合

文字列内の単語を変換する場合

正規表現で文字列の置換を行うことで文字列内の単語を変換することができます。

例えば、「パターンが共通している文字列を別の文字に変換したい」という場合に使用することができます。

● index.html

<!DOCTYPE html>
<html lang="jp">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="main.js"></script>
        <title>正規表現で文字列内の単語を置換する</title>
    </head>
    <body>
        <h2>文字列内の単語を置換する</h2>
        <div class= "objArea">
            <p class= "title">animal</p>
            <p class= "animal">lion tiger horse mouse pig deer elephant</p>
        </div>
        <button class= "btn">変換</button>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>正規表現で文字列内の単語を置換する</title>

</head>

<body>

<h2>文字列内の単語を置換する</h2>

<p class= "title">animal</p>

<p class= "animal">lion tiger horse mouse pig deer elephant</p>

</div>

</body>

</html>

● main.js

window.addEventListener('load', () => {
    const btn = document.querySelector('.btn');
    let reg = /[a-z]{4,}/g
    btn.addEventListener("click", function(event){
        let text1 = document.querySelector('.title').textContent
        let text2 = document.querySelector('.animal').textContent
        text1 = text1  + " " + text2
        let textRep = text1.replace(reg, function(value) {
            return value.toUpperCase()
        })
        const blob = new Blob([textRep],{type:"text/plain"});
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = 'replaced.txt';
        link.click();
    })
})

window.addEventListener('load', () => {

const btn = document.querySelector('.btn');

let reg = /[a-z]{4,}/g

btn.addEventListener("click", function(event){

let text1 = document.querySelector('.title').textContent

let text2 = document.querySelector('.animal').textContent

text1 = text1 + " " + text2

let textRep = text1.replace(reg, function(value) {

return value.toUpperCase()

})

const blob = new Blob([textRep],{type:"text/plain"});

const link = document.createElement('a');

link.href = URL.createObjectURL(blob);

link.download = 'replaced.txt';

link.click();

})

実行結果

実行結果(書き出したファイル)

replace()で対象の文字列を正規表現で置換しています。

今回は、「aからzが4文字以上」の正規表現としているため、「小文字のアルファベット4文字以上」の文字列が置換対象となります。

そのため、toUpperCase()でアルファベットの小文字がすべて大文字となり、「pig」以外の文字列が大文字となって表示されています。

フォーマットを変更する場合

正規表現で文字列の置換を行うことでフォーマットを変更することができます。

例えば、「文字のデータを日付のフォーマットに変更して表示したい」という場合に使用することができます。

● index.html

<!DOCTYPE html>
<html lang="jp">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="main.js"></script>
        <title>正規表現でフォーマットを変換</title>
    </head>
    <body>
        <h2>指定したファイルから日付のフォーマットを変換する</h2>
        <input type="file" id="fileObj" multiple/>
        <div class= "readArea"></div>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>正規表現でフォーマットを変換</title>

</head>

<body>

<h2>指定したファイルから日付のフォーマットを変換する</h2>

</body>

</html>

● test.txt

202002082020090920200923202212122022122420230101202303092023081520231023

1	202002082020090920200923202212122022122420230101202303092023081520231023

● main.js

window.addEventListener('load', () => {
    const objFile = document.querySelector('#fileObj');
    let reg = /(\d{4})(\d{2})(\d{2})/g
    let readArea = document.querySelector('.readArea')
    objFile.addEventListener("change", function(event){
        let file = event.target.files;    
        let reader = new FileReader(); 
        reader.readAsText(file[0]); 
        reader.onload = function(){
            readData = reader.result
            readData = readData.replace(reg, "<p>$1年$2月$3日</p>")
            readArea.innerHTML = readData
        }
    }, false);
});

window.addEventListener('load', () => {

const objFile = document.querySelector('#fileObj');

let reg = /(\d{4})(\d{2})(\d{2})/g

let readArea = document.querySelector('.readArea')

objFile.addEventListener("change", function(event){

let file = event.target.files;

let reader = new FileReader();

reader.readAsText(file[0]);

reader.onload = function(){

readData = reader.result

readData = readData.replace(reg, "<p>$1年$2月$3日</p>")

readArea.innerHTML = readData

}

}, false);

});

実行結果

replace()で対象の文字列を正規表現で置換しています。

今回は、「数字4文字 + 数字2文字 + 数字2文字」の正規表現としているため、「数字8桁」の文字列が置換対象となります。

そのため、数字8桁で並んでいたフォーマットが年月日のフォーマットに変換されて表示されています。

HTMLタグの削除を行う場合

正規表現で文字列の置換を行うことでHTMLタグの削除ができます。

例えば、「とある処理で取得したデータの特定のタグのみ取り出したい」という場合に使用することができます。

● index.html

<!DOCTYPE html>
<html lang="jp">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="main.js"></script>
        <title>正規表現でHTMLタグを削除</title>
    </head>
    <body>
        <h2>指定したファイルからタグを削除する</h2>
        <input type="file" id="fileObj" multiple/>
        <div class= "readArea"></div>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>正規表現でHTMLタグを削除</title>

</head>

<body>

<h2>指定したファイルからタグを削除する</h2>

</body>

</html>

● test.html

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="main.js"></script>
    <title>HTMLタグを削除</title>
  </head>
  <body>
    <h2>ひらがな</h2>
    <p>あいうえお</p>
    <p>かきくけこ</p>
    <p>さしすせそ</p>
    <p>たちつてと</p>
    <p>なにぬねの</p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLタグを削除</title>

</head>

<body>

<p>あいうえお</p>

<p>かきくけこ</p>

<p>さしすせそ</p>

<p>たちつてと</p>

<p>なにぬねの</p>

</body>

</html>

● main.js

window.addEventListener('load', () => {
    const objFile = document.querySelector('#fileObj');
    let reg =  /<[/]?html(.*?)>|<[/]?body>|<!DOCTYPE html>/g
    let readArea = document.querySelector('.readArea')
    objFile.addEventListener("change", function(event){
        let file = event.target.files;    
        let reader = new FileReader(); 
        reader.readAsText(file[0]); 
        reader.onload = function(){
            readData = reader.result
            readData = readData.replace(reg, '')
            readArea.textContent = readData
        }
    }, false);
});

window.addEventListener('load', () => {

const objFile = document.querySelector('#fileObj');

let reg = /<[/]?html(.*?)>|<[/]?body>|<!DOCTYPE html>/g

let readArea = document.querySelector('.readArea')

objFile.addEventListener("change", function(event){

let file = event.target.files;

let reader = new FileReader();

reader.readAsText(file[0]);

reader.onload = function(){

readData = reader.result

readData = readData.replace(reg, '')

readArea.textContent = readData

}

}, false);

});

実行結果

正規表現による文字列の置換でHTMLタグの削除を行っています。

今回は、「< + /が付くか付かない + html + 任意の文字 + >」もしくは「< + /が付くか付かない + body+ 任意の文字 + >」もしくは「」の正規表現としているため、「htmlタグとbodyタグの開始タグ、終了タグ」と「」が置換対象となります。

そのため、htmlタグとbodyタグが除去されたHTMLコードが表示されています。

正規表現でパターンマッチする配列の要素を置換する場合

正規表現でパターンマッチする配列の要素を置換するには、繰り返し処理を使用します。

そのため、繰り返し処理の中に正規表現で文字列を置換する処理を追記することで、取り出した要素に対して正規表現の置換を行うことができます。

● main.js

console.log("● 対象の配列")
let array = ['ABCDEFGH', 'abcdefgh', 'アルファベット', '123456789', 'a123b456c789', '阿流負亜別斗']
console.log(array)

console.log("● replace()使用後")
let array_reg = []
array.forEach(function(value) {
    let reg = new RegExp('[a-z]{3}|[1-9]{3}|(\\W){3}', 'gi')
    value = value.replace(reg, '***')
    array_reg.push(value)
})
console.log(array_reg)

console.log("● 対象の配列")

let array = ['ABCDEFGH', 'abcdefgh', 'アルファベット', '123456789', 'a123b456c789', '阿流負亜別斗']

console.log(array)

console.log("● replace()使用後")

let array_reg = []

array.forEach(function(value) {

let reg = new RegExp('[a-z]{3}|[1-9]{3}|(\\W){3}', 'gi')

value = value.replace(reg, '***')

array_reg.push(value)

})

console.log(array_reg)

実行結果

forEach()で配正規表現でパターンマッチする配列の要素を置換しています。

今回は、「aからzの3文字(大文字小文字の区別なし)」もしくは「1から9の3文字」もしくは「英数文字以外の3文字」の正規表現としているため、「同じ種類の文字からなる3文字」の文字列が置換対象となります。

そのため、「ABCDEFGH」が「******GH」、「abcdefgh」が「******gh」、「アルファベット」が「******ト」、「123456789」が「*********」、「a123b456c789」が「a***b***c***」、「阿流負亜別斗」が「******」となって表示されています。

もし、forEach()ついて詳しくしたい場合は下記の記事をご参照ください。

Sossyの助太刀ブログ

2月 18, 2023