jQuery 書き換えた文字列の内部の２箇ヶ所を同時に変更するには?

Question

jQueryで、タグの中の"test"を"Hello world!"に書き換えた後に、その文字列の"Hello"の部分の色を変更し、その後に、"Hello world"の真ん中の半角スペースを"␣"に変えたいと思い下記のように書きました。コメントアウトの①と②の処理を行うと、①が実行後に、②の処理で①の処理が消されてしまい、結果②だけの出力となります。①と②を同時に反映させるには、どのような書き方にすればよいでしょうか? また、今回のコードは文字列に対して2つ処理ですが、これを同じように、③、④・・・と似たような処理を増やしていくことは可能でしょうか? test

Ogre7077 · Accepted Answer

純粋なテキストだけを対象に置換を行うならば、単純に replace を重ねてください。

例)
var text = $('#text').text();
text = text.replace(/\s/g, '空白');
text = text.replace(/\d/g, '数字');
$('#text').text(text);

置換対象や置換後の文字列に HTML 構造が含まれる場合は、
HTML 要素の木構造を探って、再帰的にテキスト部を切り出し、
要素単位で置換する処理が必要となります。

例)
$('#text').each(function(){
_ R(this, /\bHello\b/i, {color:'red'}); // 見つかった箇所に span で色を付ける
_ R(this, /\bWorld\b/, 'heaven'); // 見つかった箇所をテキストで置換する
});
function R(node, re, textOrStyle) { 
_ if (node.nodeType == 1) {
_ _ var a = Array.prototype.slice.apply(node.childNodes);
_ _ for (var i in a) arguments.callee(a[i], re, textOrStyle);
_ _ return;
_ } else if (node.nodeType != 3) {
_ _ return;
_ }
_ var t = node;
_ while (true) {
_ _ var m = re.exec(t.data);
_ _ if (!m) return;
_ _ var tb = (m.index == 0)? t: t.splitText(m.index);
_ _ var tc = tb.splitText(m[0].length);
_ _ if (typeof textOrStyle == 'object') {
_ _ _ var el = document.createElement('span');
_ _ _ var s = textOrStyle;
_ _ _ for (var n in s) el.style[n] = s[n];
_ _ _ el.textContent = m[0];
_ _ _ tb.parentNode.replaceChild(el, tb);
_ _ } else {
_ _ _ tb.textContent = textOrStyle;
_ _ }
_ _ t = tc;
_ }
}

Tacosan · Answer

「この状態ですと、②の処理で、書き換えられてしまいます。」とは, どういうことでしょうか?

もともと「②の処理」で書き換えてほしかったのではないのですか?

Tacosan · Answer

「①が実行後に、②の処理で①の処理が消されてしまい」と書いているということは, 原因を理解できていないんじゃないだろうか.

①でテキストを書き換えてるけど, 変数 text の中身は変わってないよね. だから, ①で書き換える＊前＊のテキストに対して②で置き換えた結果になってる.

jQuery 書き換えた文字列の内部の２箇ヶ所を同時に変更するには?

純粋なテキストだけを対象に置換を行うならば、単純に replace を重ねてください。

「この状態ですと、②の処理で、書き換えられてしまいます。

「①が実行後に、②の処理で①の処理が消されてしまい」と書いているということは, 原因を理解できていないんじゃないだろうか.

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング