QA@IT

javascriptの文字列置換

6457 PV

例えば aaという入力文字列に対し、結果として

<span id=1>a</span><span id=2>a</span>

というように、ここの「a」に関してidによる区別を行いつつ、置換を行いたいです。

現在、下記のコードのように書いていて、
indexSet=[a, 0, b, 1, c, 2]
という配列になっています。

var num = 0;
for (var i = 0; i < indexSet.length; i+=2) {
    var subjectKeyword = new RegExp( indexSet[i], "g" );
    if( Body.match(subjectKeyword) ){
        Body = Body.split( indexSet[i] ).join( '<span id=' + indexSet[i+1] + '-' + num + '>' + indexSet[i] + '</span>' );
        num++;
    } else {
        Body = Body;
    }
}

欲しい結果は

<span id=1-1>a</span><span id=1-2>a</span>

なのですが、上記のコードでは

<span id=1-1>a</span><span id=1-1>a</span>

と、全てのaに対して同時処理を行っているように見えます。

どのように改善すればよいのかわかりません。どうか力を貸していただけませんか?

回答

とりあえず 1行ずつ何が起きているのかを解析されるとよいでしょう。
ブラウザのデバッグ機能、console.log や alertで出力などを併用するのも手です。
(ただし、どう出力されるのかは結果を見る前に推測してから確認するほうが勉強する上ではいいと思います。

とりあえず動くコードとしては以下の様になるでしょうか。

Body = 'aa';
indexSet=['a', 0, 'b', 1, 'c', 2];

var num = 0;
for (var i = 0; i < indexSet.length; i+=2) {
    var subjectKeyword = new RegExp( indexSet[i], "g" );
    if( Body.match(subjectKeyword) ){
        Body = Body.split( indexSet[i] )
                .join( '<span id=' + indexSet[i+1] + '-' + num + '>' + indexSet[i] + '</span>' );
        num++;
    } else {
        Body = Body;
    }
}
// document.getElementById("out").value = Body;
alert(Body);

以下に動くものを用意しました。
http://jsfiddle.net/7W9eD/

タグで正規表現をあげられていますが今回は正規表現は関係ないです。

if文が成立した

Body = Body.split( indexSet[i] )
          .join( '<span id=' + indexSet[i+1] + '-' + num + '>' + indexSet[i] + '</span>' );

この内容が思う様な動きにならなければ解決しません。

Bodyが"aa" だとして、今回の提示されたコードを元に砕いていくと、
マッチする indexSet[i]'a'しかないですから、iは 0ですね。
indexSet[i+1]indexSet[1]なので 0 です。
numの初期値は 0です。
ループになってますが、1巡目だけ考えてみるとこういう値になるはずなので、
ひとまず上で上げた行に当てはめてみましょう。

Body = "aa";
Body = Body.split( 'a' )
          .join( '<span id=' + 0 + '-' + 0 + '>' + 'a' + '</span>' );

alert(Body);

これを実行したBodyの結果が希望の形になっていないのであれば、これを修正する必要があります。
ひとまずsplitの動き、joinの動きを確認されてはどうでしょうか。

編集 履歴 (1)
ウォッチ

この質問への回答やコメントをメールでお知らせします。