Javascript或JQuery字符串获得具有特定前缀的子字符串

Javascript or JQuery string get substring with certain prefix

本文关键字：字符串 前缀 JQuery Javascript      更新时间：2023-09-26

我有一个有许多类的元素，我想访问一个特定的类来获得它的最后一个数字(我意识到数据属性或ID可能是更好的选择，但现在我被类所困扰)。我已经能够使用它的ID来选择元素，所以我只需要确定my-target-*的最后一个数字是什么。

例子
<div class="foo bar apple my-target-1"></div>

我想获得类my-target-*，然后从中提取1

循环遍历包含'my-target'的所有元素，假设它是最后一个类，按空格分割类，获得最后一个类，再用'-'分割，然后获得所需的值。

下面是一个工作示例:

$(document).ready(function(){
 $("[class*= my-target]").each(function(){
    var extract= $(this).attr('class').split(' ').pop().split('-').pop();
    $("#result").html(extract);
    
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo bar apple my-target-1"></div>
<span id="result"></span>

这是一个jQuery选择器，它应该针对你的元素:

$("[class*=my-target]");

但这可能比您需要的更通用:它使用CSS 子字符串选择器*=，因此它也将匹配以下元素:

<div class="not-my-target"></div>

你可以尝试组合选择器来获得更具体的内容:

 $("[class^=my-target], [class*= my-target"]);

将CSS 以开头的选择器与contains.

组合在一起。

现在要从类名中获取所需的数据，需要对class属性进行一些字符串解析:

var numberToExtract = -1;
var elem = $("[class*=my-target-]");
if (elem)
{
    classes = elem.attr("class").split(/'s+/);
    $.each(classes, function(idx, el)
    {
        if (el.startsWith("my-target-"))
        {
            numberToExtract = el.split("-").pop();
            return false;
        }
    });
}

使用数据元素可能会更简洁

<div class="foo bar apple my-target-1" data-target="1"></div>

你可以这样做:

$('.my-target-1').data('target')

这比解析类

要好

要让任何人开始使用这些类，请尝试以下

$('div[id^=foo bar apple my-target]')

如果您无法使用类而不是数据属性，您可以使用以下命令从对象中提取完整的类字符串:

obj.attr('class')

，然后将其与正则表达式进行匹配，正则表达式使用词边界和捕获括号来提取'my-target-*'

末尾的数字。

必须有ID来捕获特定的div或span内容。小心，也许你有一个类和一个子类。

<div id='id' class='myclass mysubclass' >Testing</div>

所以如果你想有类选择器，做以下操作:

var className = '.'+$('#id').attr('class').split(' ').join('.')

和

.myclass.mysubclass

现在，如果你想选择所有具有相同类的元素，如上面的div:

var class=$('.'+$('#id').attr('class').split(' ').join('.'))
这意味着

var class=$('.myclass.mysubclass')

如果你想让第二个类变成多个类，使用into元素

var class_name = $('#id').attr('class').split(' ')[1]; '

或者你可以简单地使用var className = $('#id').attr('class');，这将返回全名类和子类，然后使用JQuery/JavaScript子字符串方法处理它

相关文章：