JSFiddle - React, Tailwind, and code Playground

by Stéphane Lorimier

HTML

<section id="compteNote">
 <h3>Compte les notes dans une partitions</h3>
 <textarea id="notes" cols="100" rows="16">  %{0%}		c4 c c des8 c8
          c2 c
          c4 c c des8 c8
          c2 c
  %{5%}		bes4 bes bes c8 bes
          bes2 bes
          bes4 bes bes c8 des
          c2 c
  %{10%}	ees4 ees ees f8 ees
          ees2 ees
          ees4 ees8 ees ees4 f8 ees
          ees2 ees
  %{15%}	f4 g aes g8 f
          ees4 d c d8 ees
          f4 f f ees8 f
          g2 g2
          \bar ".|:"
  %{20%}	g4 g4 g4 aes8 g</textarea>
</br>
<button onclick="compteNotes('nombreDeNotes',document.getElementById('notes').value);">Compter les notes</button>
<span id="count">Nombre de caractères sur fichier :</span>
<div id="nombreDeNotes"></div>
<div id="nombreDeNotes0"></div>

JavaScript

var a = document.getElementById("notes");
a.addEventListener("keyup",function(){
document.getElementById("count").innerHTML = "Nombre de caractères sur fichier :" + " "+ a.value.length;
})


function compteNotes(output,chaine) {
	var notes = Array('a','ais','aes','b','bis','bes','c','cis','ces','d','dis','des','e','eis','ees','f','fis','fes','g','gis','ges');
	var str = chaine.toString();
	var exp = new RegExp('[abcdefgis]+','g');	
	var tabNom=str.match(exp);
	var notesValidee=Array();
	for(var i=0;i<tabNom.length;i++){
		if (notes.includes(tabNom[i]) == true){ 			
			notesValidee.push(tabNom[i]); 
			}else{
			notesValidee = "Rien";
			}
			
		}	
	
	console.log("notesValidee: "+notesValidee+' tabNom[0]: '+tabNom[1]+' tabNom.length: '+tabNom.length+' type: '+typeof tabNom);
	var nbcara=str.length;
	if ( tabNom.length >  1 ) {	
		tabNom = notesValidee;
		var affichage='' + tabNom.length + '';
		document.getElementById(output).innerHTML = "Cette partition compte "+affichage+" notes. ";
		tabNom = tabNom.toString();
		var res=tabNom.match(/(.{1,100})/g);		
		document.getElementById(output+"0").innerHTML = "Notes sélectionée: "+ res.join("</br>"); //.match(/.{0,20}/g);
		}else {	
		document.getElementById(output).innerHTML = "La chaine n'est pas valide. Il ne contient aucune note. Voyez ci-dessous:	</br>"+tabNom+"<hr>";
		
		}
	}