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

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 因为链接中有一个空格:

1. 如何调整上面的代码以删除第一个单词之前的所有空格。
2. 如何确保如果单词之间有多个空格，则该空格仅变为一个 -。

因此下面的所有示例链接都会返回 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:我无法更改程序中的链接。

PS4:我很想听到有关标题的更好建议。

到目前为止的代码以及下面评论的帮助

  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>