【jQuery】チェックボックスの後のテキストを置換する方法

Question

###実現したいこと
下記のチェックボックスの後ろのテキストの頭に追加している「01-」「02-」「03-」を削除したく思っています。

<label class="select"><input name="" type="checkbox">01-りんご</label>
<label class="select"><input name="" type="checkbox">02-バナナ</label>
<label class="select"><input name="" type="checkbox">03-みかん</label>

下記ソースで置換をすると「01-」「02-」「03-」は消えるもののチェックボックスも消えてしまいます。

$('label.select').each(function(){
	var txt = $(this).text();
	$(this).text(
		txt.replace(/\d{2}-/g,"")
	);
});

チェックボックスは残しつつ、「01-」「02-」「03-」のみ削除する方法がありましたらご教授いただけないでしょうか。

###補足情報
例えば、「01-りんご」「02-バナナ」「03-みかん」の部分を<span>等で囲むことができればいいのですが、CMSの管理画面のソースのため変更するのが難しい状況です。
「01-」「02-」「03-」は並び順を制御するために便宜的に付けています。

Answer 1

こんな感じで出来そうです。

$( 'label.select' ).each( function() {
    var txt = this.childNodes.item( 1 ).nodeValue;
    this.childNodes.item( 1 ).nodeValue = txt.replace( /\d{2}-/g, "" );
} );
```**動くサンプル：**[https://jsfiddle.net/mxojmzzj/](https://jsfiddle.net/mxojmzzj/)

---

【二章第三回 基本的な操作とテキストノード — JavaScript初級者から中級者になろう — uhyohyo.net】
[http://uhyohyo.net/javascript/2_3.html](http://uhyohyo.net/javascript/2_3.html)

Comments

[umauman]

早速ありがとうございます。サンプルや参考サイトも非常に助かります。本当に感謝です！
こちらに記述変更をしてみたところ、なぜかCMS管理画面上でうまく適用されず、色々検証をしてみたところ、途中で改行やインデント等が入ると動作しないことが分かりました。

・うまく動作する
<label class="select"><input name="" type="checkbox">01---りんご</label>

・動作しない　※CMS管理画面
<label class="select">
<input name="" type="checkbox">01---りんご</label>

もう少し、教えていただいたページを読んでみることにします。

[kei344]

this.childNodes.item( 1 ).nodeValue の「1」の部分を23456と変えていけばどのノードかが特定できるとは思いますよ。

for ( var i; i < this.childNodes.length; i++ ) {}
で this.childNodes.item( i ).nodeValue の中身を確認して合致するものを置換するようにする事も出来ると思います。

[umauman]

順に数を増やしていったら、合致しました。ありがとうございました！

かなりの素人な質問で恐縮ですが、下記の記述方法のみ最後に教えていただくことはできないでしょうか？
>for ( var i; i < this.childNodes.length; i++ ) {}
>で this.childNodes.item( i ).nodeValue の中身を確認して合致するものを置換するようにする事も
>出来ると思います。

下記のような感じで四苦八苦してるのですが、中身の確認の方法がわからず…（かなり勘違いしているような気がしてますが）
$( 'label.select').each( function() {
this.childNodes.item( i ).nodeValue
for ( var i; i < this.childNodes.length; i++ ) {
console.log(i);
}
} );

[kei344]

すみません、コメントでミスがあったので下記でお願いします。

$( 'label.select').each( function() {
for ( var i = 0; i < this.childNodes.length; i++ ) { // 「= 0」が抜けていました、すみません
console.log(this.childNodes.item( i ).nodeValue);
}
} );

[umauman]

ご返信ありがとうございます。
教えていただいた記述で無事表示できました。
何度も質問してしまい申し訳ありませんでした。