在span标记内查找特定值

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标签中找到一个特定的单词。位于

内。我想从下面的代码中获得“6”。

<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.

我也希望得到“80”并将其放入。 Tempo和Time Signature的值不断变化,因此简单的搜索和检索不起作用。

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

我在SO上尝试了很多方法,但似乎没有什么能帮助我。

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.

任何帮助都非常感谢。

4 个解决方案

#1

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

我修改了Barmer的答案,找到了“Time Signature”值。

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>

#2

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>

#3

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

这是一个JsFiddle:DEMO

#4

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:

你也可以参考下面的JSFiddle:

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

#1