マジレス希望

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

解決済

質問者：PlanetSD
質問日時：2017/12/06 19:06
回答数：3件

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

また、今回のコードは文字列に対して2つ処理ですが、これを同じように、③、④・・・と似たような処理を増やしていくことは可能でしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2 …
</head>
<body>

<script>
$(document).ready(function(){

$('#text').html('Hello world!');

var text = $('#text').text();
$('#text').html(text.replace(new RegExp("Hello","g"),'<span style="color:#FF1493">Hello</span>')); //①
$('#text').html(text.replace(new RegExp( "\\s","g"),'␣')); //②

});
</script>

<span id="text">test</span>

</body>
</html>

本文にもあるように②で書き換えられては困ります。①と②を同時に反映させるには、どのような書き方にすればよいでしょうか?

No.2の回答に寄せられた補足コメントです。補足日時：2017/12/07 10:46
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： Ogre7077
回答日時：2017/12/07 17:22

純粋なテキストだけを対象に置換を行うならば、単純に 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;
_ }
}

- 1
- 件

通報する

この回答へのお礼

ありがとうござまいす。返答を頂くまえに、なんとか自力で完成させたのですが、
回答者様が書かれたコードの方が、圧倒的に汎用性が高く、こんな書き方もあるのかと、非常に勉強になります。

通報する

お礼日時：2017/12/07 20:04

No.2

回答者： Tacosan
回答日時：2017/12/07 00:12

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

」とは, どういうことでしょうか?

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

- 0
- 件

通報する

No.1

回答者： Tacosan
回答日時：2017/12/06 19:32

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

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

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
var text = $('#text').text();
$('#text').html(text.replace(new RegExp("Hello","g"),'<span style="color:#FF1493">Hello</span>')); //①
text = $('#text').text(); //追加※1
$('#text').html(text.replace(new RegExp( "\\s","g"),'␣')); //②

※1を追加しました。
書き換えたものを、もう一度取得して、変数textに入れて、それにもう一度、処理を加えるようにしました。この状態ですと、②の処理で、書き換えられてしまいます。

通報する

お礼日時：2017/12/06 20:00

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！