Javascript jquery:统计数据属性中的字数

我有一些带有数据属性的元素，其中包含一些标记

我需要计算每个元素的标记数

像这样：

<div data-tags="foo bar something else">
    some text
</div>
<div data-tags="foo bar">
    some text
</div>
<div data-tags="foo">
    some text
</div>
<div data-tags="">
    some text
</div>

$('div[data-tags]').each(function(){
    var tags = $(this).data('tags'),
        count = tags.split(' ').length;
    $(this).css({marginLeft: (20 * count)});
});

"".split(' '); //[""]
"foo".split(' '); //["foo"]

但通过这种方式，对于数据标记为“”和数据标记为=“foo”的两个元素，计数都将为1，因为拆分的结果如下所示：

<div data-tags="foo bar something else">
    some text
</div>
<div data-tags="foo bar">
    some text
</div>
<div data-tags="foo">
    some text
</div>
<div data-tags="">
    some text
</div>

$('div[data-tags]').each(function(){
    var tags = $(this).data('tags'),
        count = tags.split(' ').length;
    $(this).css({marginLeft: (20 * count)});
});

"".split(' '); //[""]
"foo".split(' '); //["foo"]

这两个的长度都是1

我能想到的唯一方法是添加一个条件，并在拆分结果不是[“”]的情况下执行这些操作。但这看起来不是个好主意。或者至少不是最好的

---

我想知道是否有人有更好的主意。谢谢。

您可以使用regexp

match

代替简单拆分：

$('div[data-tags]').css('marginLeft', function() {
    var tags = $(this).data('tags');
    return (tags.match(/\w+/g) || []).length * 20;
});

---

演示：您可以使用regexp

match

代替简单拆分：

$('div[data-tags]').css('marginLeft', function() {
    var tags = $(this).data('tags');
    return (tags.match(/\w+/g) || []).length * 20;
});

---

演示：一种方法是使用

Array.prototype.filter（）

，和

String.prototype.trim（）

，以删除仅空白的数组元素：

$（'div[数据标记]）。每个（函数（）{
var tags=$（this）.data（'tags'），
计数=标记。拆分（“”）。过滤器（函数（字）{
返回word.trim（）.length；
}).长度；
$（this.css）({
保证金左：（20*计数）
});
});
div[数据]{
边框：1px实心#000；
}

一些文本
一些文本
一些文本
一些文本
一种方法是使用
Array.prototype.filter（）
和
String.prototype.trim（）
，以删除仅空白的数组元素：


$（'div[数据标记]）。每个（函数（）{
var tags=$（this）.data（'tags'），
计数=标记。拆分（“”）。过滤器（函数（字）{
返回word.trim（）.length；
}).长度；
$（this.css）({
保证金左：（20*计数）
});
});
div[数据]{
边框：1px实心#000；
}

一些文本
一些文本
一些文本
一些文本
谢谢。你的答案很好，但我必须选择正确的答案，@dfsq答案非常聪明。我想是的，谢谢。你的答案很好，但我必须选择正确的答案，@dfsq答案非常聪明。我想。