Question

我在某个程序中有很多按钮。但是没有一个按钮具有特定的类。因此，我通过以下代码添加它们。

jQuery('.btn').each(function() {
  var btnFullText = jQuery(this).text();
  var btnText = btnFullText.replace(/\s+/g, '-').toLowerCase();
  jQuery(this).addClass(btnText);
});

到目前为止，这非常有效。但是你可能已经猜错了。

有些按钮编码如下：

<a class="btn btn-info" href="javascript:void(0);" onclick="Joomla.submitbutton('taskform.add');"><i class="icon-plus icon-white"></i> New Task</a>

这会创建一个类似-new-task的类，因为链接中有一个空格：

如何调整上面的代码，只删除第一个单词之前的所有空格。
如何确保在单词之间有多个空格，这只会变成一个-。

以下所有示例链接都会返回new-task

<a><i class="icon-plus icon-white"></i> New Task</a>
<a><i class="icon-plus icon-white"></i>     New     Task</a>
<a><i class="icon-plus icon-white"></i>         New    Task</a>

PS1：在这种情况下，我需要使用jQuery代替$。

PS2：如果您愿意，可以将上面的代码改为完全Javascript / jQuery。

PS3：我无法更改程序中的链接。

以下评论帮助下的代码

  jQuery('.btn').each(function() {
    var btnFullText = jQuery(this).text();
    var btnTrimmedText = btnFullText.trimLeft().replace(/\s+/g, '-').toLowerCase();
    var btnText = btnTrimmedText.replace(/-+/, '-');
    jQuery(this).addClass(btnText);
  });

Answer 1

$('a').each(function(){
    var $this = $(this);
    //get the text
    //trim the leading and trailing spaces
    //replace all occurances of one or more spaces with '-'
    //lowercase the result
    var clazz = $this.text().trim().replace(/\s+/g, '-').toLowerCase();
    
    //only do this if you don't want '--' in your ids
    clazz = clazz.replace(/-{2,}/g, '-');
    
    $this.addClass(clazz);
    console.log(clazz);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a><i class="icon-plus icon-white"></i> New Task</a>
<a><i class="icon-plus icon-white"></i>     New     Task</a>
<a><i class="icon-plus icon-white"></i>         New    Task</a>
<a><i class="icon-plus icon-white"></i>         New  -  Task</a>

删除前导空格并替换多个空格

1 个答案: