JavaScript实现清除首尾空白字符再进行空白匹配

 更新时间:2025年12月24日 08:34:57   作者:岂不闻  
这篇文章主要为大家详细介绍了JavaScript实现清除首尾空白字符再进行空白匹配的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下

1.前言

先清除字符串首尾空白字符,再进行正则匹配。trim()确保清除字符串首尾空白字符串,match再进行正则匹配。

const trimmedStr = str.trim();
const result = trimmedStr.match(/your-regex/);

2.代码

function parseNameAndJob(str: string): { name: string; job: string } {
  // 处理 null、undefined、非字符串
  if (!str || typeof str !== 'string') {
    return { name: '-', job: '-' };
  }

  const trimmed = str.trim();

  // 特判:空字符串 或 仅为括号(中英文,允许中间有空格)
  if (trimmed === '' || /^[((]\s*[))]$/.test(trimmed)) {
    return { name: '-', job: '-' };
  }

  // 正则:匹配第一个左括号到第一个右括号之间的内容
  // - 姓名部分:任意字符(可为空)
  // - 职位部分:不包含右括号的任意字符(可为空)
  const match = trimmed.match(/^(.*?)\s*[((]\s*([^))]*)\s*[))]/);

  if (match) {
    const name = match[1].trim();
    const job = match[2].trim();

    // 如果姓名为空,则 name 设为 '-'
    // 否则保留姓名;job 为空则设为 '-'
    return {
      name: name === '' ? '-' : name,
      job: job === '' ? '-' : job
    };
  }

  // 未匹配到括号结构:整个字符串作为姓名
  return { name: trimmed, job: '-' };
}

解释:

  • ^:从开头匹配
  • (.*?):非贪婪捕获姓名(可为空)
  • \s*[((]:跳过空格,匹配左括号
  • ([^))]*)关键! 只匹配不包含右括号的内容,确保在第一个右括号处停止
  • \s*[))]:跳过空格,匹配右括号
  • 不使用 $:避免因末尾空格或多余字符导致匹配失败

调用方法输出结果

console.log(parseNameAndJob("(产品经理)"));
// 输出: { name: '-', job: '产品经理' }

console.log(parseNameAndJob("周杰()"));
// 输出: { name: '周杰', job: '-' }

console.log(parseNameAndJob("吴磊"));
// 输出: { name: '吴磊', job: '-' }

3.方法补充

js清除字符串中空白字符方法的对比

下面介绍了如何使用JavaScript的trim(), replace()方法及正则表达式去除字符串中的空白字符,重点比较了各种方法的适用场景,推荐最简洁的replace(/s/g,'')操作。

let str = `  \t这是一段测试字符串,空 白\t字\f符\v测\r\n试。空 白\t字\f符\v测\r\n试。 \t`
 
console.log(`*** 原始文本 ***`)
console.log(str)
 
// 使用trim()清除空白字符
console.log(`*** trim() ***`)
console.log(str.trim())
 
// 使用replace清除空格
console.log(`*** replace(' ', '') ***`)
console.log(str.replace(' ', ''))
 
// 使用replace清除全部空格
console.log(`*** replace(/ /g, '') ***`)
console.log(str.replace(/ /g, ''))
 
// 使用replace清除全部空白字符
console.log(`*** replace(/[ \\r\\n\\t\\f\\v]/g, '') ***`)
console.log(str.replace(/[ \r\n\t\f\v]/g, ''))
 
// 使用replace清除全部空白字符
console.log(`*** replace(/\\s/g, '') ***`)
console.log(str.replace(/\s/g, ''))

运行结果:

Javascript中判断输入的字符串是否为空?是否为数值?去掉首尾空格

 Javascript中判断输入的字符串是否为空?为数值?去掉首尾空格是最常见的3个应用,但是如果一段时间不用,总会忘记,还是记下来比较好。

1. 是否为空?

太简单了,取值判断是否与""相等即可,示例函数如下:

     function isNULL(ctlID, ctlName) {
         var ctl = document.getElementById(ctlID);
         if (ctl.value == "") {
             alert(ctlName + "不能为空。");
             ctl.focus();
             return true;
         }
         return false;
     }

如果直接判断,这样写:

    if(document.getElementById(ctlID).value =="") {...}

2. 是否为数值?

使用isNaN(para)函数。该函数判断para是否不是数值。示例函数如下:

    function isNumber(num){

        return !isNaN(para);

    }

直接判断:

    if(!isNan(document.getElementById(ctlID).value)) {...}

3. 是否为整数?

1)直接法,用正则表达式:

     function isInt(num) {
         if (num.match(/^-?[0-9]+$/) == null) return false;
         else return true;
     }

2)间接法,用parseInt()方法。因为整数字符串转换为整数后长度不变,而其他情况长度会变化。所以可以用此判断输入是否为整数。

     function isInt(num) {
           var ctlInt = 1 + parseInt(ctlValue) ; //加1是为了去除负号“-”的影响
            if(ctlInt == ctlValue) return true;
            else return false;
     }

4. 是否为浮点数?

用“3.”的直接法,只要更换相应的正则表达式即可,如:

  • ^/d+$" //非负整数(正整数 + 0)
  • ^[0-9]*[1-9][0-9]*$" //正整数
  • ^((-/d+)|(0+))$" //非正整数(负整数 + 0)
  • ^-[0-9]*[1-9][0-9]*$" //负整数
  • ^-?/d+$" //整数
  • ^/d+(/./d+)?$" //非负浮点数(正浮点数 + 0)
  • ^(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*))$" //正浮点数
  • ^((-/d+(/./d+)?)|(0+(/.0+)?))$" //非正浮点数(负浮点数 + 0)
  • ^(-(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*)))$" //负浮点数
  • ^(-?/d+)(/./d+)?$" //浮点数

备注:即使判断同一种对象,正则表达式的写法也有多种,优劣只能自己判断。

5. 去除首尾空格

用正则表达式:

1)原型法,也就是为字符串类型提供去掉首尾空格的函数:

     String.prototype.trim = function() {
         return this.replace(/(^/s*)|(/s*$)/g, "");
     }

2)一般函数,返回去掉首尾空格后的字符串:

     function trim(str) {
         return str.replace(/(^/s*)|(/s*$)/g, "");
     }

到此这篇关于JavaScript实现清除首尾空白字符再进行空白匹配的文章就介绍到这了,更多相关JavaScript清除首尾空白字符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Bootstrap缩略图与警告框学习使用

    Bootstrap缩略图与警告框学习使用

    这篇文章主要为大家详细介绍了Bootstrap缩略图与警告框学习使用的相关资料,希望通过这篇文章和大家更多的去学习Bootstrap缩略图与警告框,从中得到收获
    2017-02-02
  • JS调用Android、Ios原生控件

    JS调用Android、Ios原生控件

    本文主要介绍了JS调用Android、Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时,提高代码质量,实现两者在网页端代码的统一。下面跟着小编一起来看下吧
    2017-01-01
  • typescript枚举的具体使用

    typescript枚举的具体使用

    使用枚举我们可以定义一些带名字的常量,本文主要介绍了typescript枚举的具体使用,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • 微信小程序 如何保持登录状态

    微信小程序 如何保持登录状态

    这篇文章主要介绍了微信小程序 如何保持登录状态,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • BootStrap整体框架之基础布局组件

    BootStrap整体框架之基础布局组件

    这篇文章主要为大家详细介绍了BootStrap整体框架之基础布局组件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • BootStrap与Select2使用小结

    BootStrap与Select2使用小结

    这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示。接下来通过本文给大家分享BootStrap与Select2使用小结,需要的朋友参考下
    2017-02-02
  • 用javascrpt将指定网页保存为Excel的代码

    用javascrpt将指定网页保存为Excel的代码

    这段代码在服务器中没有权限,可以保存在本地,存为htm文件,运行即可,就可以把文本内容存为excel文件了
    2008-01-01
  • JS支持带x身份证号码验证函数

    JS支持带x身份证号码验证函数

    身份证号码验证-支持新的带x身份证
    2008-08-08
  • JavaScript Canvas实现图片局部放大镜效果

    JavaScript Canvas实现图片局部放大镜效果

    这篇文章主要为大家详细介绍了如何使用JavaScript Canvas实现图片局部放大镜效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • JavaScript面向对象编写购物车功能

    JavaScript面向对象编写购物车功能

    这篇文章主要为大家详细介绍了JavaScript面向对象编写购物车功能的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08

最新评论