使用jQuery進行文本操作

Question

有沒有一種方法可以更改這段代碼，使其在“ {}”之間而不是在帶有.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} 

但我仍然希望能夠轉位

Answer 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? This {A} is a {G} great song. {B} How awesome is {D} this? ，我更改了整個方法。 更新的jsFiddle中的完整示例。

而不是使用.each ，而是將內容作為字符串（ text ），使用字符串方法.match （ text ）進行匹配，該方法返回一個數組，然后遍歷該數組，將和弦移出該數組（ currentChord = String(matches[i]) ），並根據您的和弦進行操作，然后使用字符串方法.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);