2020.10.23

JavaScript

JavaScriptのreplaceメソッドで文字列を置換

デモページはこちら

JavaScriptのreplaceメソッドで文字列を置換します。空文字に置換することで対象文字列の削除も可能です。また全ての対象文字列の置換に正規表現を利用したり、複数の対象文字列の置換にメソッドチェーンを利用したりできます。

以下のhtmlの構造でテストします。liタグ内のspanタグはCSSで太字を適用しています。

<ul>
	<li>HTML・CSS</li>
	<li><span>JavaScript・jQuery</span></li>
	<li>Photoshop・Illustrator・XD</li>
	<li>ツール・フリーソフト・その他</li>
</ul>
<p class="title">最初の要素を変更</p>
<input type="button" class="btn01" value="replace">
<input type="button" class="btn02" value="text"><br><br>
<p class="title">2番目の要素を変更</p>
<input type="button" class="btn03" value="replace">
<input type="button" class="btn04" value="html"><br><br>
<p class="title">3番目の要素を変更</p>
<input type="button" class="btn05" value="replace(正規表現なし)">
<input type="button" class="btn06" value="replace(正規表現あり)"><br><br>
<p class="title">最後の要素を変更</p>
<input type="button" class="btn07" value="replace(メソッドチェーン)"><br><br>
<input type="button" class="btn08" value="リロードしてリセット">

最初の要素の変更は文字列の削除です。対象の文字列をreplaceメソッドで空文字に置換します。jQueryのtextメソッドのみでも同様の変更が可能です。
2番目の要素の変更は文字列の置換です。対象の文字列をreplaceメソッドで置換します。取得する要素にhtmlタグが含まれるので、jQueryのhtmlメソッドで要素を取得・変更している部分が最初の要素と異なります。htmlメソッドのみでも同様の変更が可能です。
3番目の要素の変更は全ての文字列の置換です。正規表現を利用しない場合、対象の文字列が複数あっても最初に一致した文字列しか置換できません。正規表現を利用すれば対象の文字列を全て置換できます。正規表現を利用する場合、文字列はクォーテーションで囲みません。「/正規表現/」のように囲み、正規表現のパターンとして認識させます。「g」は全一致検索のフラグです。
最後の要素の変更は複数の文字列の置換です。対象の文字列を複数指定したい場合、replaceメソッドをメソッドチェーンでつなげて処理します。

$(function() {
	$('.btn01').on('click', function() {
		var txt01 = $('ul').children('li:first').text();
		var result01 = txt01.replace('・CSS', '');
		$('ul').children('li:first').text(result01);
	});
	$('.btn02').on('click', function() {
		$('ul').children('li:first').text('HTML');
	});
	$('.btn03').on('click', function() {
		var txt02 = $('ul').children('li:nth-child(2)').html();
		var result02 = txt02.replace('JavaScript', 'JS');
		$('ul').children('li:nth-child(2)').html(result02);
	});
	$('.btn04').on('click', function() {
		$('ul').children('li:nth-child(2)').html('<span>JS・jQuery</span>');
	});
	$('.btn05').on('click', function() {
		var txt03 = $('ul').children('li:nth-child(3)').text();
		var result03 = txt03.replace('・', '/');
		$('ul').children('li:nth-child(3)').html(result03);
	});
	$('.btn06').on('click', function() {
		var txt04 = $('ul').children('li:nth-child(3)').text();
		var result04 = txt04.replace(/・/g, '/');
		$('ul').children('li:nth-child(3)').html(result04);
	});
	$('.btn07').on('click', function() {
		var txt05 = $('ul').children('li:last').text();
		var result05 = txt05.replace(/・/g, '、').replace('その他', 'エディタ');
		$('ul').children('li:last').html(result05);
	});
	$('.btn08').on('click', function() {
		location.reload();
	});
});

関連記事

2020.10.18

JavaScript

swiper.jsで連動する2つのスライダーを実装

デモページはこちら swiper.jsで連動する2つのスライダーを実装します。メインのスライダーはナビゲーションボタンかスワイプでスライドさせ、それに連動して背…

2020.10.26

JavaScript

JavaScriptのsplitメソッドで要素を分割し配列に格納

デモページはこちら JavaScriptのsplitメソッドで要素を分割し配列に格納します。 以下のhtmlの構造でテストします。 splitメソッドは指定した…

2020.10.17

JavaScript

swiper.jsのオプションslidesPerViewにautoを指定して独自で横幅設定

デモページはこちら swiper.jsのオプションslidesPerViewにautoを指定して、独自で横幅を設定します。htmlのコードは以下の通りです。ナビ…

2020.10.27

JavaScript

JavaScriptで文字列を検索(indexOf・search・match・test)

デモページはこちら JavaScriptで文字列を検索するメソッドのまとめです。それぞれ記述の仕方と戻り値に特徴があります。 以下のhtmlの構造でテストします…

2025.08.11

JavaScript

swiper自動再生をマウスオーバーで制御

デモページはこちら swiper.jsでスライドを自動再生させ、マウスオーバーで一時停止、マウスアウトで再開を切り替えます。htmlのコードは以下の通りです。 …

上に戻る