Regex for Cifras site as Cifraclub

Question

I need a Regex that works well, and in JS, to take only the chords of a cipher like this: http://www.cifraclub.com.br/gui-rebustini/sou-um-altar/

The problem is I never messed with Regex.

Any idea?

Answer 1

Regex is not the right tool for this problem. By inspecting the page’s source code, I see that the ciphers are each in one element b, with class _i0, _i1, _i2 and so on (irrelevant in this particular case). The ideal then is to search the DOM for these elements:

var cifras = document.getElementById("ct_cifra")
                     .getElementsByTagName("b");
var texto = "";
for ( var i = 0 ; i < cifras.length ; i++ )
    texto += cifras[i].innerHTML + " ";

If you want to extract these ciphers directly from the site, you can use a bookmarklet and display the resulting text in a alert, console.log, etc (somewhere where you can copy and paste).

javascript:(function(){var cifras=document.getElementById("ct_cifra").getElementsByTagName("b");var texto='';for(var i=0;i<cifras.length;i++)texto+=cifras[i].innerHTML+' ';alert(texto);})();

_{Note: code tested successfully in Firefox and Chrome, but in Chrome I could not select the text from the alert dialog box to copy.}

Answer 2

The following Xpath code returns all page ciphers.

//pre[@id='ct_cifra']/b/text()

Just adapt it to the language you are using.

To test it, in your browser’s JS Console, use the following expression:

$x("//pre[@id='ct_cifra']/b/text()")

Answer 3

I’m assuming that you refer to client-side Javascript (browser), and not to a server application written in Node.js, for example.

Stackoverflow in English has a similar question: https://stackoverflow.com/questions/597907/open-webpage-and-parse-it-using-javascript

The most voted answer indicates that it is impossible for you to do this using only Javascript, since for security reasons, ajax is only allowed to load pages from the same domain as yours.

To load content from another domain, as is your case, you will need a server-side script (in PHP, Python, Ruby, etc).

Answer 4

<?php

/* A variável Cifra guarda a letra da música cifrada*/

$cifra = "E7     Amaj7
Antes de eu falar
             A9
Tu cantavas sobre mim
C#m               B4
    Tu tens sido tão
         A9
Tão bom     pra mim

C#m                   B4
    Antes de eu respirar
              A9
Sopraste Tua vida em mim
C#m               B4
    Tu tens sido tão
        A9
Tão bom    pra mim";

/* Esse é o padrão (regex) que utilizei para reconhecer todos os acordes da letra cifrada da variável acima */ 

$pattern = "/((?!(?<=[ÇçáéíóúÁÉÍÓÚ]))(((\b([A-G]{1,1}((?!([\scefghiklnopqrtuvxwyz]))((add|ADD)|#m|#|º|b)?([2-9]|m(\B|$)|maj|sus|dim|\(|º)?(\/[A-G][2-9](#|º)?(b{1,1})?)?(\+)?(\/([A-G]|[2-9]))?(º|#|b|\([2-9]\))?([2-9]|m)?(\+|(?<=[2-9])M)?(11|13)?(\/)?([A-G])?)([Eb|Bb])?(\([0-9]?[0-9]?(\/)?[0-9]?[0-9]?)?(\/1[1-9])?\b(\(((2|4|5|6|7|9|11|13)|[bB][2-9])\))?(-|\/[A-G])?(\/[2-9])?([2-9]|\)|\((b13|b11|b5)\)|\([2-9]\)|-|\/)?(\+)?)(m|b|º|#|13|add[2-9]\))?)|\b(?(?<=(?<=\s)[A-G](?=\s)))[A-G](?!(\s)?[a-zH-Z])\b)(º)?)((\(([0-9]{1,2})?(\-)?(\+)?\))|(?!((?:[çáéíóúÇÁÉÍÓÚ])|((\t|\s)[a-zA-Z][A-Z]|\s[A-G][a-z]\w|\s[A-G]\s\w[H-Z])\w?)))|(?(?<=(?<=\s)[A-G]M|[A-G]m|[A-G]m(?=\s)))([A-G]m|[A-G]M(?!\s))(#|b)?([2-9]|maj|sus|dim|º|º)?(\/[A-G][2-9](#)?(b{1,1})?)?(\+)?(\/([A-G]|[2-9]))?(#|b|\([2-9]\))?([2-9])?(\+)?(\([A-G][2-9]\))?(\([1-9][1-9]?\))?(11|13)?(-|\/[A-G])?(\/[2-9])?([2-9]|-|\/)?(\+)?(b|#|13)?(?!(\s)?[a-zH-Z])(?!(?:[,çáéíóúÇÁÉÍÓÚ]))\W)/";

/* Apliquei abaixo o comando preg_replace que coloca todas ocorrências (acordes) encontradas entre as tags </b>*/    

$cifra = preg_replace($pattern, "<b>$1</b>", $cifra);

echo "<pre>". $cifra ."</pre>";