0

我正在创建自己的 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 />

我的问题发生在包含&nbsp;

我想我只是简单地 .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

我希望第一个和第三个返回破折号。所以我对空白修剪感到困惑。有人看到我做错了什么吗？

4

4 回答 4

3

这里的问题是当它们出现在 HTML 中时.html()将返回字符&nbsp;，这本身不是空白。

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

假设跨度仅包含文本，您可以替换.html()为.text()检索textNode将正确修剪的 (s)：

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

小提琴

同样正如@undefined 所指出的，本机String.trim()未在 IE8 及以下版本中实现，因此jQuery.trim()如果您想支持这些版本，则首选：

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

小提琴

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

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

小提琴

小提示：if (theValue === "")在正则表达式替换后应该足够了，因为 span 元素总是返回一个字符串.html()（.replace()适用于该字符串），无需检查null/ undefined。

于 2012-10-20T21:21:49.787 回答
1

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

于 2012-10-20T21:21:22.053 回答
0

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

于 2012-10-20T21:23:04.727 回答
0

当已有可与 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
    }
  }
});
于 2012-10-20T21:29:50.003 回答