根据字符串匹配从选定的类中获取数字答案

【问题标题】：Grabbing number from selected class based on string match根据字符串匹配从选定的类中获取数字
【发布时间】：2015-07-11 10:38:48
【问题描述】：

我需要在li 列表的选定类中获取[ 和] 之间的数字，并将该数字存储在一个变量中。我已经尝试了以下方法，但我错过了一些东西。我不确定在括号之间查看并抓取字符串所需的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

【问题讨论】：

能否请您修复代码中的 javascript 错误。目前它根本不工作，而不是工作不正确......

标签： javascript jquery regex string-matching

【解决方案1】：

:contains('on-air-date') 无效，您不能使用contains 访问具有指定类的子元素。同样.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/

【讨论】：

【解决方案2】：

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

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

Example fiddle

【讨论】：

【解决方案3】：

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

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

Demo

【讨论】：

【解决方案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中返回的字符串匹配和子串的数字列表

【讨论】：