Question

Is there a way that I can change this piece of code to work between “{}” instead of between the tags with a .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);
    });

Here is what I have so far, but it doesn’t work

    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]);
    }

EDIT

A .chord usually looks something like this…

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

but now it looks like this…

{C#m}

but I still want to be able to traspose

Answer 1

Simply find the braces in the text, and extract the text between them. I used .indexOf to find the brackets and .slice to extract the text between them.

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

It should work for your original code snippet:

$('.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);
});

Here is a jsFiddle.

---

EDIT:

With your markup looking like This {A} is a {G} great song. {B} How awesome is {D} this?, I changed the entire method. Full example in an updated jsFiddle.

Rather than using .each, take the content as a string (text), match it using the string method .match (text), which returns an array, then loop through that array, taking the chord out of the array (currentChord = String(matches[i])), manipulating it with your chord progression, then using the string method .replace to replace the match contained in the array (matches[i]) with the edited chord (output).

Maybe this’ll make more sense:

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);