Find specific value inside a span tag

Question

I am trying to find a specific word inside a span tag.
The <span> is inside a <pre> .
I want to get the "6" from the code below.

<span class="infos">Scale: Ab Major
Time Signature: 6/8
Tempo: 80
Suggested Strumming: DU,DU,DU,DU
</span>

I also want to get the "80" as well and put it into an <input> .
The values of Tempo and Time Signature keeps on varying, so a simple search and retrieve didn't work.

I have tried so many methods suggested on SO, but nothing seems to help me with it.

This is the code that came closest. But it didn't help.

<script>
$("span:contains('Tempo:')").html(function(_, html) {
    return html.replace(/(Tempo:)/g, '<span class="tem">$1</span>');
});
</script>

<span class="infos">Scale: Ab Major
 Time Signature: 6/8
 Tempo: 80
  Suggested Strumming: DU,DU,DU,DU
</span>

Any help is really appreciated.

Answer 1

You need to use the capture group to get the part that varies, not the part that's constant, so you can copy the variable part into the appropriate place in the replacement.

 $("span:contains('Tempo:')").html(function(_, html) { return html.replace(/Tempo: (\\d+)/, '<span class="tem">Tempo: <input name="tempo" value="$1"></span>'); }); 

 .infos { white-space: pre; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <span class="infos">Scale: Ab Major Time Signature: 6/8 Tempo: 80 Suggested Strumming: DU,DU,DU,DU </span> 

Answer 2

If each info is on a different line, here's a solution :

var infosList = $(".infos").text().split('\n');
var time = infosList[1].split(":")[1].trim().split("/");
//time : [6,8]
var tempo = infosList[2].split(":")[1].trim();
//tempo : 80

Here's a JsFiddle : DEMO

Answer 3

Its better to use this way:

var formatted_data = new Array();;
var info_data = $(".infos").html().split("\n"); 
$.each( info_data, function( index, value ){
    var data = value.split(":");
    formatted_data[data[0]]=$.trim(data[1]);
});
$("#time_signature").html(formatted_data["Time Signature"]);
$("#tempo").html(formatted_data["Tempo"]);

This way you can retrieve all the data in info span.

You can also refer the below JSFiddle for the same:

https://jsfiddle.net/aman_chhabra/nvs16wr1/

Answer 4

I have modified the answer of Barmer to find the 'Time Signature' value.

I think this may help you.

 $("span.infos").html(function(_, html) { var searchWord = 'Time Signature:'; var searchWordlen = searchWord.length; var lastIndexofSearchWord = html.lastIndexOf(searchWord) + searchWordlen; var timeSignature = html.substring(lastIndexofSearchWord, html.lastIndexOf("/")); timeSignature = parseInt(timeSignature); //here is your value alert(timeSignature); return html.replace(/Tempo: (\\d+)/, '<span class="tem">Tempo: <input name="tempo" value="$1"></span>'); }); 

 .infos { white-space: pre; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <span class="infos">Scale: Ab Major Time Signature: 6/8 Tempo: 80 Suggested Strumming: DU,DU,DU,DU </span>