1

このコードを変更して、.chordのタグ間ではなく、「{}」間で機能するようにする方法はありますか？（Jquery）

//Basically it iterates over my text and transposes chords based on an array 
   var match;
   var chords = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B','C','Db','D','Eb','E','F','Gb','G','Ab','A','Bb','B','C'];
   var chords2 = ['C','Db','D','Eb','E','F','Gb','G','Ab','A','Bb','B','C','C#','D','D#','E','F','F#','G','G#','A','A#','C'];
   var chordRegex = /(?:C#|D#|F#|G#|A#|Db|Eb|Gb|Ab|Bb|C|D|E|F|G|A|B)/g;

$('.chord').each(function(){
        ///// initializes variables /////
        var currentChord = $(this).text(); // gatheres each object
        var output = "";
        var parts = currentChord.split(chordRegex);
        var index = 0;
        /////////////////////////////////
        while (match = chordRegex.exec(currentChord)){
            var chordIndex = chords2.indexOf(match[0]);
            output += parts[index++] + chords[chordIndex+1];
        }
        output += parts[index];
        $(this).text(output);
    });

これが私がこれまでに持っているものですが、それは機能しません

    var iframeBody=$('iframe').contents().find('body');
    var str = $(iframeBody).html();
    var rec = /\{(.*?)\}/g, matchesc;
    while (matchesc = rec.exec(str)) {
        ///// initializes variables /////
        var currentChord = matchesc[1]; // gatheres each object
        var output = "";
        var parts = currentChord.split(chordRegex);
        var index = 0;
        /////////////////////////////////
        while (match = chordRegex.exec(currentChord)){
            var chordIndex = chords2.indexOf(match[0]);
            output += parts[index++] + chords[chordIndex+1];
        }
        output += parts[index];
        //$(this).text(output);
        matchesc[1] = output;
        $(iframeBody).html(str.replace(matchesc[1], output));
        //alert(matchesc[1]);
    }

編集

.chordは通常、次のようになります。

<span class="chord">C#m</span>

でも今はこんな感じ…

{C#m}

しかし、私はまだ転置できるようにしたい

4

1 に答える 1

1

テキストの中括弧を見つけて、それらの間のテキストを抽出するだけです。私.indexOfは角かっこを見つけて、.sliceそれらの間のテキストを抽出するために使用しました。

currentChord = currentChord.slice(currentChord.indexOf("{"),currentChord.indexOf("}"));

元のコードスニペットで機能するはずです。

$('.chord').each(function(){
    ///// initializes variables /////
    var currentChord = $(this).text(); // gatheres each object
    var output = "";
    currentChord = currentChord.slice(currentChord.indexOf("{")+1,currentChord.indexOf("}");
    var parts = currentChord.split(chordRegex);
    var index = 0;
    /////////////////////////////////
    while (match = chordRegex.exec(currentChord)){
        var chordIndex = chords2.indexOf(match[0]);
        output += parts[index++] + chords[chordIndex+1];
    }
    output += parts[index];
    $(this).text(output);
});

これがjsFiddleです。

編集：

マークアップがのようThis {A} is a {G} great song. {B} How awesome is {D} this?になっているので、メソッド全体を変更しました。更新されたjsFiddleの完全な例。

を使用するのではなく.each、コンテンツを文字列（text）として取得し、文字列メソッド.match（text）を使用して一致させます。これにより、配列が返され、その配列をループして、配列からコードを取り出し（currentChord = String(matches[i])）、コードの進行で操作します。次に、stringメソッド.replaceを使用して、配列（matches[i]）に含まれている一致を編集されたコード（output）に置き換えます。

多分これはもっと理にかなっているでしょう：

var matches = $('#main').text().match(rec);
console.log(matches);
var text = $('#main').text();
for (var i = 0; i < matches.length; i++) {
    ///// initializes variables /////
    var currentChord = String(matches[i]);
    currentChord = currentChord.slice(currentChord.indexOf("{") + 1, currentChord.indexOf("}"));
    console.log(currentChord);
    var output = "";
    var parts = currentChord.split(chordRegex);
    var index = 0;
    /////////////////////////////////
    while (match = chordRegex.exec(currentChord)) {
        var chordIndex = chords2.indexOf(match[0]);
        output += parts[index++] + chords[chordIndex + 1];
    }
    output += parts[index];
    text = text.replace(matches[i], output);
}
$('#main').text(text);
于 2012-09-20T22:41:31.077 に答える