我在某个程序中有很多按钮。但没有一个按钮有特定的类别。因此我通过下面的代码添加它们。
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:我无法更改程序中的链接。
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);
});
最佳答案
$('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>
关于javascript - 删除前导空格并替换多个空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47230564/