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


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 相关文章推荐
轻量级 JS ToolTip提示效果
Jul 20 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
vue-cli3搭建项目的详细步骤
Dec 05 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
详解Node.js如何处理ES6模块
May 15 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
ThinkPHP写第一个模块应用
2012/02/20 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python实现AES加密与解密
2019/03/28 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
python 进程池pool使用详解
2020/10/15 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
高中美术教学反思
2014/01/19 职场文书
C++程序员求职信范文
2014/04/14 职场文书
旅游文化节策划方案
2014/06/06 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
golang import自定义包方式
2021/04/29 Golang
Python打包为exe详细教程
2021/05/18 Python
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
JavaScript 原型与原型链详情
2021/11/02 Javascript
python实现学员管理系统(面向对象版)
2022/06/05 Python