本文详细解析了JavaScript中去除字符串前后空格的5种常见实现方式,包括循环检查、原型扩展正则替换、jQuery内置方法、MooTools实现以及字符串裁剪法。通过代码示例对比各方法的逻辑与适用场景,并指出在处理长字符串时,基于索引遍历的裁剪方式效率最高,为开发者提供实用的代码选择参考。
在Web项目开发中,处理用户注册表单时,如何有效剔除用户输入内容前后的空格是一个常见需求。以下整理了几种常用的JavaScript实现方案供参考。
第一种:循环检查替换
第一种方法:循环检查替换
具体实现代码如下:
function trim(s){
return trimRight(trimLeft(s));
}
// 去除左侧空白字符的辅助函数
function trimLeft(s){
if(s == null) {
return "";
}
var whitespace = new String(" \t\n\r");
var str = new String(s);
if (whitespace.indexOf(str.charAt(0)) != -1) {
var j=0, i = str.length;
while (j < i && whitespace.indexOf(str.charAt(j)) != -1){
j++;
}
str = str.substring(j, i);
}
return str;
}
//去掉右侧空白 www.jb51.net
function trimRight(s){
if(s == null) return "";
var whitespace = new String(" \t\n\r");
var str = new String(s);
if (whitespace.indexOf(str.charAt(str.length-1)) != -1){
var i = str.length - 1;
while (i >= 0 && whitespace.indexOf(str.charAt(i)) != -1){
i--;
}
str = str.substring(0, i+1);
}
return str;
} 第二种:正则替换
第二种:正则表达式替换
第二种方法:正则表达式替换
通过扩展String原型实现,代码如下:
<SCRIPT LANGUAGE="JavaScript">
<!--
String.prototype.Trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g, "");
}
String.prototype.LTrim = function()
{
return this.replace(/(^\s*)/g, "");
}
String.prototype.RTrim = function()
{
return this.replace(/(\s*$)/g, "");
}
//-->
</SCRIPT> 第三种:使用jquery
第三种:使用jQuery库
第三种方法:使用jQuery库
直接调用jQuery提供的工具函数,代码如下:
$.trim(str) jQuery内部的实现逻辑大致如下:
具体代码实现为:
代码如下:
function trim(str){
return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');
} 第四种:使用motools
第四种:使用MooTools库
第四种方法:使用MooTools库
MooTools中的实现方式如下:
function trim(str){
return str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, '');
} 第五种:裁剪字符串方式
第五种:字符串裁剪方式
第五种方法:字符串裁剪方式
通过手动遍历字符进行裁剪,代码如下:
function trim(str){
str = str.replace(/^(\s|\u00A0)+/,'');
for(var i=str.length-1; i>=0; i--){
if(/\S/.test(str.charAt(i))){
str = str.substring(0, i+1);
break;
}
}
return str;
} 经过测试第五种方法在处理长字符串时效率最高。
实际应用示例
实际应用示例:
<script type="text/JavaScript">
// 定义去空格函数
function SystemTrim(str) {
var regExp = /(^\s*)|(\s*$)/;
return str.replace(regExp,"");
}
// 表单提交时的调用示例
function add()
{
var ownername=document.form1.ownername.value;
if(SystemTrim(ownername)=="")
{
alert("请输入您的称呼!");
return;
}
}
</script>