Question

我正在创建自己的jquery插件来格式化电话号码。以下是一些包含一些演示数据的跨度。

<span class="formatMe">&nbsp;</span><br />
<span class="formatMe">(123)456-7890</span><br />
<span class="formatMe">&nbsp;</span><br />
<span class="formatMe"></span><br />
<span class="formatMe">(123)456-7890</span><br />

我的问题发生在包含 

的范围内

我想我只是.trim（）每个元素中的值，它会处理空白区域，但是我没有得到所需的结果。

<script>
(function( $ ){
$.fn.voip1Wire = function() {
return this.each(function() {
  var theValue = $(this).html().trim().replace(/ /g,'');
  if (theValue === null || theValue === undefined || theValue == ""){ 
       $(this).html("------"); 
       return true; // break out of the loop
  }

      $(this).html('formatted number to return');

}); // eof .each

  };
})( jQuery );

</script>

可能有点矫枉过正，你可以看到我正在使用.trim（）和.replace（）

var theValue = $(this).html().trim().replace(/ /g,'');

我可能没有正确使用javascript / jquery，但这就是我所拥有的：

formatted number to return
formatted number to return
formatted number to return
-----------
formatted number to return

我预计第1和第3将返回破折号。所以我对空白修剪感到困惑。有人看到我做错了吗？

Answer 1

这里的问题是，当.html()出现在HTML中时， 将返回字符.html()，而本身不是空格。

DOM解析器会将该字符序列解释为空格，但常规字符串中的那些字符（.html()返回的内容）不被视为空格。

假设跨度仅包含文字，您可以将.text()替换为textNode以检索将被正确修剪的var theValue = $(this).text().trim();：

var theValue = $.trim( $(this).text() );

Fiddle

同样如@undefined所述，本地String.trim()未在IE8及更低版本中实现，因此如果您想支持这些版本，则首选jQuery.trim()：

var theValue = $(this).html().replace(/^(\s|&nbsp;)+|(\s|&nbsp;)+$/g, '');

Fiddle

现在，如果你想坚持使用正则表达式解决方案：

if (theValue === "")

Fiddle

小注意：.html()应该在正则表达式替换后足够，因为span元素总是返回.replace()的字符串（null处理的字符串），不需要检查{{ 1}} / undefined。

Answer 2

尝试使用.replace(/\s/g,'');删除所有空格。

Answer 3

.text().trim() - 我想你没有html

Answer 4

当有可用的源代码/插件已经与jquery一起使用时，你是否有任何特殊原因试图自己这样做？

从这里采取：http://docs.jquery.com/Plugins/Validation/CustomMethods/phoneUS 美国电话号码提供了一个工作示例：

jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, ""); 
    return this.optional(element) || phone_number.length > 9 &&
        phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");

$("#myform").validate({
  rules: {
    field: {
      required: true,
      phoneUS: true
    }
  }
});

jquery修剪空白问题

4 个答案: