https://idea-hack.com/courses/how-to-handle-boolean-values-numbers-and-characters-in-javascript/lessons/replace-method-which-is-convenient-when-you-want-to-replace-the-character-string-with-javascript/
https://idea-hack.com/courses/how-to-handle-boolean-values-numbers-and-characters-in-javascript/lessons/replace-method-which-is-convenient-when-you-want-to-replace-the-character-string-with-javascript/

JavaScriptで文字列を置き換えたい時に便利なreplace()メソッドの使い方

JavaScriptで特定の文字列を置き換えたい時はreplace()メソッドを利用します。

構文

メソッド意味返り値
文字列.replace(開始インデックス、[終了インデックス省略可]) 文字列を置き換える文字列
replace()

サンプルコード

Output
replace(0, 4)
Pug
.container.my-5
	table.table
		tr
			th replace(0, 4)
			td.result1
JavaScript
const targetString = 'JavaScriptを勉強する';
document.querySelector('.result1').textContent = targetString.replace('JavaScript','CSS');

正規表現を使ったサンプル

ちなみに、正規表現を使って入力された文字列から特定の文字列を取り除くために使うこともあります。

このサンプルコードでは正規表現「/ {2,}/」を使って、2連続で半角スペースが続いた時に、1まとめにします。

Output

入力フォーム

※ 実際にデータは送信されません

Pug
.container.my-5
	form.input
		h1 入力フォーム
		input#inputText(placeholder="入力してください。連続するスペースは1つにまとめられます。" type="text")
		p.caption
			small ※ 実際にデータは送信されません
		button#submitButton(type="submit") 送信する
	#output.text-center
SCSS
form.input {
	text-align: center;
	h1 {
  font-size: 26px;
  margin-bottom: 20px;
	}
	h2{
		font-size: 24px;
	}
	#inputText {
  margin-top: 20px;
  width: 100%;
  max-width: 400px;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #c1c1c1;
	}
	.caption {
		small {
			font-size: 12px;
			color: #949494;
		}
	}
	button {
  --background-color: #fff;
  --color: #576574;
  --transition: all .3s;
  margin-bottom: 10px;
  background-color: var(--background-color);
  padding: 10px;
  color: var(--color);
  border: 1px solid #576574;
  cursor: pointer;
  width: 120px;
  transition: var(--transition);
		&:hover {
			transition: var(--transition);
			color: var(--background-color);
			background-color: var(--color);
		}
	}
}
JavaScript
// #submitButtonをクリックしたときの処理を設定
document.getElementById('submitButton').addEventListener('click', (e) => {
	const output = document.getElementById('output');
	// ボタンのデフォルトの挙動をキャンセル
	e.preventDefault();
  // 電話番号を取得
  const inputText = document.getElementById('inputText').value;

  // 電話番号に「-」が含まれている場合は、''(空文字)に置き換える(正規表現)
  const trimmedInputText = inputText.replace(/ {2,}/, ' ');
	
	output.textContent = trimmedInputText;
});
インストラクター
コメント

コメントを残す