JavaScriptで文字列を別の文字列に置換する方法:基礎編21

Programming

今回は、JavaScriptで文字列を別の文字列に置換する方法を紹介します。
今回紹介するプログラムでは、入力フォームでの不要な改行や「-(ハイフン)」などを消して、見易く綺麗な文字列に置換する事が出来ます。

こんな場合に使用

  • 文字列を別の文字列に変えたい
  • 不要な改行コードや空白を消したい

難易度(MAX10)★★★★★☆☆☆☆

文字列を別の文字列に置換する方法

文字列を別の文字列に置換するには以下のメソッドを使用します。

対象文字列.replace(文字列1 , 文字列2)文字列1を文字列2に置換する
対象文字列.replace(正規表現 , 文字列)正規表現によって文字列を置き換える

文字列を別の文字列に置換するにはreplaceメソッドを使用します。
実際の使い方は以下の通りです。

const imgname = 'img1.png';
imgname.replace('img1.png' , 'img02.png'); //「img1.png」を「img02.png」に置換
const inputtext = '鈴木\n太郎';
inputtext.replace('\n' , '') //「\n」を消す
実際の返答

replaceメソッドは、第一引数が文字列の場合、置換対象となる文字列は最初のもののみです。
そのため、「090-0000-1111」の様な電話番号で「tel.replace(‘-‘ , ”);」の様に「-」を消そうとしても「0900000-1111」の様に最初の「-」しか対象となりません。

この様な場合は以下の様に正規表現を使うことで複数文字の置換が出来ます。

const tel = '090-0000-1111';
tel.replace(/-/g , '');

以下のコードは、テキストエリア にメールアドレスを入力すると「@」以前の文字列を削除して、ドメイン部分のみが返答されるサンプルです。

<main>
 <input id="textarea" placeholder="テキストエリア" type="text">
 <p class="caption"><small>*メールアドレスのドメイン部分のみを取得します。</small></p>
 <button id="submitButton" type="submit">実行する</button>
</main>
document.querySelector('#submitButton').addEventListener('click' , (event) => {
    const text = document.querySelector('#textarea').value;
    const trimtextarea = text.replace(/.*?(\@)/g, '');
    alert(`ドメインは ${trimtextarea} です`)
    event.preventDefault();
})

テキストエリアに「mka@gmail.com」と入力すると@以前の文字列は削除され@以降の文字列のみが返されます。
*「/.*?(\@)/g」は@を含み@以前と言う意味の正規表現です。


以上が「JavaScriptで文字列を別の文字列に置換する方法:基礎編21」でした。

置換の方法を究めれば、いろんな応用に使えます。
一括でCSSクラスを変換したり、改行をなくしたり、反対に改行を付け加えたりと作業効率が大幅に上がる様な事が可能になります。基本はプログラミングでの作業効率だが、一般職での作業効率系システムにも使える技なのでしっかりと覚えておきましょう。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました