根据字符串匹配从所选 class 中抓取数字

Question

我需要在 li 列表的选定 class 中获取 [ 和 ] 之间的数字，并将该数字存储在变量中。我试过以下方法，但我遗漏了一些东西。我不确定在括号之间查找并获取字符串所需的 regex。

Javascript

var assetID = $(".selected:contains('on-air-date').find('[]');

HTML

<ul id="asset-list" class="expandable selectable normal" style="height: 671px;">
    <li class="selected">
        <div class="thumb">
            <a href="/content/assets/750">
                <img src="https://www.google.com/images/srpr/logo11w.png">
            </a>
        </div>
        <div class="title">
            <div>
                <strong>Title of story</strong>
                <br>
                <span class="on-air-date">
                    On air: 10/28/14 05:30:00pm
                    [750]
                </span>
                <br>
                <span class="blue radius label">Staging</span>
                <span class="green radius label">Live</span>
            </div>
        </div>
    </li>
    <li>
        <div class="thumb">
            <a href="/content/assets/4200">
                <img src="https://www.google.com/images/srpr/logo11w.png">
            </a>

        </div>
        <div class="title">
            <div>
                <strong>Another story title</strong>
                <br>
                <span class="on-air-date">
                    On air: 12/10/14 02:09:18pm
                    [4200]
                </span>
                <br>
                <span class="blue radius label">type label</span>

            </div>
        </div>
    </li>
    <li>
        <div class="thumb">
            <a href="/content/assets/4201">
                <img src="https://www.google.com/images/srpr/logo11w.png">
            </a>
        </div>
        <div class="title">
            <div>
                <strong>Yet another story title</strong>
                <br>
                <span class="on-air-date">
                    On air: 12/10/14 02:09:18pm
                    [4201]
                </span>
                <br>
                <span class="blue radius label">type label</span>
            </div>
        </div>
    </li>
</ul>

JSFiddle：link

Answer 1

:contains('on-air-date')无效，不能使用contains访问指定class的子元素。另外 .find('[]') 无效。以下代码对我有用：

  $('.selected').click(function () {
     var assetID = $(this).find('.on-air-date').text().split('[')[1].replace(']', '');
     //this first splits the text into two by '['
     //then we get the second half by [1]
     //finally we remove the last character ']' by using .replace

     alert(assetID);
  })

演示：https://jsfiddle.net/k3keq3vL/1/

Answer 2

您当前的代码无效，因为 :contains 用于查找元素内的文本值，而不是 class。您需要使用 find() 和 text() 来检索元素中的值。从那里您可以使用正则表达式来提取大括号中的值。试试这个：

var selectedAirDateText = $('.selected').find('.on-air-date').text();
var matches = /\[(.+)\]/gi.exec(selectedAirDateText);
console.log(matches[1]); // = '750'

Example fiddle

Answer 3

一个正则表达式可以帮助你得到如下数字：

var num = $('.selected span.on-air-date').text().replace(/[^\[]*\[(\d+)\].*/,'');

Demo

Answer 4

您需要先获取所需的单个项目，或者运行一个 $.each 以获取页面中的所有内容。

//run the each statement
$(".on-air-date").each(function(index,value) {

     //set the string (str) variable to the value's text which is inside the <span>  
     var str = $(value).text();

     // match the string with [ ] with anything inside. and then remove the last ].  Then take the substring of the content after the [
     var value = str.match(/\[(.*?)\]/g)[0].replace(/\]/g,'').substring(1,str.length-1));

});

http://jsfiddle.net/k3keq3vL/8/ 打开您的控制台以查看在字符串匹配和子字符串

的 console.log 中返回的数字列表

根据字符串匹配从所选 class 中抓取数字

Grabbing number from selected class based on string match

javascript

regex

jquery

string-matching