去除字符串左右两边的空格(实现代码)


Posted in Javascript onMay 12, 2016
在日常工作中,过滤表单中的一些特殊的字符是很常见的功能,比如文本中要求输入单纯的数字,但用户有时会误输入一些多余的空格或其他字符混合的文本,这显然不符合输入要求。
下面一起来学习怎么样去除字符串左右两边的空格。
过滤前:

去除字符串左右两边的空格(实现代码)

过滤后:

去除字符串左右两边的空格(实现代码)

HTML代码:
<div class="main">
     <input id="userName" type="text" placeholder="请输入用户名">
     <input id="rule" type="button" value="过滤">
   </div>

CSS代码:

html,body,div,input{margin:0;padding:0;}
    .main{width:400px;height:auto;padding:0 15px;text-align:center;}
    .main input{width:100%;height:35px;border:none;margin-top:20px;border-radius:5px;}
    input[type="text"]{text-align:left;padding-left:15px;box-sizing:border-box;border:1px solid blue;}
    input[type="button"]{width:50%;background:blue;}
    @media only screen and (max-width: 415px) {
      .main{width:100%;box-sizing:border-box;}
    }

js部分:

var userName = document.getElementById('userName'),
        rule   = document.getElementById('rule'),
        regexEmpty = /^(\s|\u00A0)+|(\s|\u00A0)+$/g;

    rule.onclick = function (){
      userName.value = userName.value.replace(regexEmpty,''); //正则替换
      console.log(userName.value);
    }

以上这篇去除字符串左右两边的空格(实现代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
分析JS中this引发的bug
Dec 12 Javascript
js生成word中图片处理方法
Jan 06 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
Puppet的一些技巧
Sep 17 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 #Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 #Javascript
Bootstrap3制作图片轮播效果
May 12 #Javascript
JS创建事件的三种方法(实例代码)
May 12 #Javascript
jQuery判断checkbox选中状态
May 12 #Javascript
Bootstrap3制作自己的导航栏
May 12 #Javascript
You might like
我常用的几个类
2006/10/09 PHP
几种显示数据的方法的比较
2006/10/09 PHP
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
python魔法方法-自定义序列详解
2016/07/21 Python
Python输入二维数组方法
2018/04/13 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
python字典一键多值实例代码分享
2019/06/14 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
Python中Unittest框架的具体使用
2019/08/27 Python
python数据预处理方式 :数据降维
2020/02/24 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
商务英语应届生自我鉴定
2013/12/08 职场文书
求职信名称怎么写
2014/05/26 职场文书
大四毕业生自荐书
2014/07/05 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
酒店收银员岗位职责
2015/04/07 职场文书