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 回答