为字符串中的空格创建HTML跨度

Question

给定一串文本，我想为每组空间创建跨度。我怎么能这样做？

示例

var myString = "   foo bar"

结果

<p><span class="spaces">   </span>foo<span class="spaces> </span>bar</p>

我尝试了什么：

var myString = "   foo bar"
var $p = $('p');

for (var i = 0; i < myString.length; i++) {
  if (myString[i] == ' ') {
    $p.append('<span class="spaces"> </span>');
  } else {
    $p.append(myString[i]);
  }
}

Answer 1

一个简单的replace应该可以解决问题。

"   foo bar".replace(/(\s+)/g,'<span class="spaces">$1</span>');