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();
});
});





