format_list_bulleted
【JavaScript】文字列を置換する方法(replace)について解説
最終更新日時:2020-05-03 12:58:48



JavaScriptで文字列を操作するメソッドの一つにreplaceメソッドがあります。このメソッドでは文章内の特定の文字列や正規表現で表現された文字列パターンを他の文字列に変換することができます。replaceメソッドを用いることで簡易的なマークダウン機能などを実装することができます。本記事ではreplaceメソッドを用いた文字列置換について実装例を交えて説明します。正規表現について先に学習したい方は「JavaScriptの正規表現(RegExp)の書き方・使い方について解説」も参考にしながら読むのがおすすめです。

replaceメソッドの使い方

replaceメソッドは使い方にいくつかのオプションがあります。本項ではオプションに分けてreplaceメソッドの使い方について解説します。

正規表現を用いない使い方

replaceメソッドは正規表現を用いなくても使うことが可能です。

置換対象の文字列.replace(置換したい文字列,置換する場所に差し込む文字列)

第一引数に引数に置換したい文字列を、第二引数に差し込む文字列を指定することで置換を行います。戻り値として置換を行なった後の置換対象の文字列を返します。対象の文字列に複数置換できる箇所があっても、初めの文字列を置換した時点で戻り値を返します。したがって複数箇所の置換をしたい場合はfor文やwhile文などのループ処理を行うか、正規表現を用いたreplaceメソッドを利用しましょう。

正規表現を用いた使い方

RegExpオブジェクトで正規表現を用いることで文字列パターンによる文字の置換を行うことができます。

置換対象の文字列.replace(RegExpオブジェクト,置換する場所に差し込む文字列)

第一引数でRegExpオブジェクトを用いて正規表現によるパターンで置換する箇所を指定し、第二引数で差し込む文字列を指定することで置換を行います。戻り値として置換を行なった後の置換対象の文字列を返します。正規表現にgオプションがついている場合、対象の文字列に複数置換できる場所があれば、その全てを置換します。

第二引数でマッチした要素を使いたい場合

第二引数で第一引数でマッチした文字列を利用したい場合は多いでしょう。その際には$を用いて利用することができます。

記法意味
$&マッチした文字列を意味す。
$n(n = 1,2,3...)正規表現を用いた場合、()内にマッチしたサブマッチ字列
$`マッチした文字列の直前の文字列
$'マッチした文字列の直後の文字列
$$$を意味する。
greeting = "Hello my name is Tanaka"
greeting.replace("Hello","$&! every one") //"Hello! every one my name is Tanaka"

関数で実装する場合もマッチした文字列を引数として受け取ることができます。

関数で処理を書く方法

第二引数では関数の戻り値で、置換する場所に差し込む文字列を指定することもできます。次がその例です。

msg = "Code-Databaseではプログラミングに関する情報を随時更新しています。"
msg.replace("Code-Database", func) //"コードデータベースではプログラミングに関する情報を随時更新しています。"
function func() {
    return "コードデータベース"
}

関数内では第一引数としてマッチした文字列を使用できます。したがって次のような実装が可能です。

msg = "Code-Databaseではプログラミングに関する情報を随時更新しています。"
msg.replace("Code-Database", func) //"Code-Database(コードデータベース)ではプログラミングに関する情報を随時更新しています。"
function func(match) {
    return `${match}(コードデータベース)`
}

引数matchとしてマッチした文字列を使用しています。(テンプレートリテラルを用いていますが、こちらについては「JavaScriptの文字列操作について解説」を参考にしてください)

正規表現でマッチさせた場合、第二引数以降ででサブマッチ文字列を利用することができます。(サブマッチ文字列とは正規表現で()で括られた部分にマッチした文字列です。)

実装例をもとに理解したい場合は2項でマークダウンエデュタを元に解説しています。

簡易マークダウンエデュタの実装

今回は正規表現でreplaceメソッドを活用して簡易的なマークダウンエデュタを実装してみます。次のようなものを作ります。(正規表現を用いたreplaceでの実装例になります。正規表現を詳しく学習したい方は「JavaScriptの正規表現(RegExp)の書き方・使い方について解説」を参照してください!)

h1タグとボルド、リンク、改行を指定することができます。記法のルールは次のようになっています。

記法意味
#とスペース以降に続く改行までの部分をh1タグにする
*{文字}*括られた文字が1文字以上の場合、その文字列をboldにする
https://....URLはリンクにする
改行改行部分に</br>を入れる

ソースコード

コードを確認してみましょう。ファイルは次のような階層になっています。

root/
 ├ index.html
 └ main.js

(index.html)

<body>
    <textarea id='textarea' cols='50' rows='10'></textarea>
    <button id='button'>作成</button>
    <div id='display'></div>
    <script src='./main.js'></script>
</body>

テキストを入力するtextareaと作成ボタン、生成されたマークダウンを表示するディスプレイを配置しています。

(main.js)

const textarea = document.getElementById('textarea')
const button = document.getElementById('button')
const display = document.getElementById('display')
const url_regexp = /https?:\/\/([\w-]+\.)+[\w-]+(\/[\w-~ .?%&=]*)*/g

button.addEventListener('click', () => {
    value = textarea.value //テキストエリアから文字を取得
    value = value.replace(url_regexp, addAnker) //urlをaタグに変換
    value = value.replace(/\*\{([^(\*\{)(\}\*)]+)\}\*/g, addBold) //ボルドを変換
    value = value.replace(/# (.+)\n/g, addHeading) //#をh1タグに変換
    value = value.replace(/\n/g, '</br>') //改行を</br>に変換
    display.innerHTML = value //displayに変換したテキストを挿入

    function addAnker(match) {
        return `<a href="${match}">${match}</a>`
    }
    function addBold(_, p1) {
        return `<span style="font-weight:bold;">${p1}</span>`
    }
    function addHeading(_, p1) {
        return `<h1>${p1}</h1>`
    }
})

次のサイトで実際に動作を確認してみてください。

コードペン

コードの解説

main.jsファイルのコードについて細かく解説していきます。

(main.js)

const textarea = document.getElementById('textarea')
const button = document.getElementById('button')
const display = document.getElementById('display')

はじめにHTML要素を取得しています。

(main.js)

const url_regexp = /https?:\/\/([\w-]+\.)+[\w-]+(\/[\w-~ .?%&=]*)*/g

URLの正規表現をurl_regexpとして宣言しています。この際にgオプションをつけて複数のURLに対しても置換できるようにします。(正規表現の意味については「JavaScriptの正規表現(RegExp)の書き方・使い方について解説」を参照してください。)

ボタンのハンドラ関数内ではreplaceメソッドで指定の文字列パターンの置換を順次行なっていきます。

(main.js)

value = value.replace(url_regexp, addAnker) 
function addAnker(match) {
    return `<a href="${match}">${match}</a>`
}

まずはURLをアンカータグに置換していきます。この際にaddAnker()関数を呼び出します。addAnker()関数ではaタグのhrefにマッチしたURLを指定しています。

(main.js)

value = value.replace(/\*\{([^(\*\{)(\}\*)]+)\}\*/g, addBold)
function addBold(_, p1) {
    return `<span style="font-weight:bold;">${p1}</span>`
}

次に、addBold()関数を呼び出し、*{}*で囲われた部分の内部にstyle属性でfont-weight:bold;を指定していきます。addBold()関数では第一引数を用いないため_で表現しています。第二引数ではサブマッチ文字列である*{}*内部の任意の文字列をp1として利用しています。

(main.js)

value = value.replace(/# (.+)\n/g, addHeading) 
function addHeading(_, p1) {
    return `<h1>${p1}</h1>`
}

そして、addHeading()関数で#<space>から改行までをh1タグでくくっていきます。addHeading()関数でも第一引数を用いないため_で表現しています。第二引数ではサブマッチ文字列である#<space>以降の任意の文字列をp1として利用しています。

(main.js)

value = value.replace(/\n/g, '</br>')

最後に、改行に対して</br>を適用しHTML内での改行を実装していきます。(この処理をaddHeading()に先行して行うとh1タグの実装が要件通りにできないため注意が必要です。)

以上のような流れでマークダウンエデュタを実装することができました。h2タグの機能やイタリック体への変換、リストの実装なども同様の仕組みで実装することができます。応用してみたい方はぜひ実装してみましょう!

この記事のまとめ

本記事ではJavaScriptのreplaceメソッドによる文字列の置換について実装例を交えて説明しました!最後に記事の要点をまとめてみましょう。

  • replaceメソッドは文字列の置換を実現することができる
  • replaceメソッドは文字列を用いる場合と正規表現を用いることができる
  • replaceメソッドは関数の戻り値で、置換する場所に差し込む文字列を指定することもできる
  • replaceメソッドと正規表現で簡易的なマークダウンエデュタを作成することができる

JavaScriptのreplaceメソッドを是非活用してみましょう。