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清除首尾空白字符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序 scroll-view实现锚点滑动的示例

    微信小程序 scroll-view实现锚点滑动的示例

    本篇文章主要介绍了微信小程序 scroll-view实现锚点滑动的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • JavaScript实现简单获取本地图片主色调

    JavaScript实现简单获取本地图片主色调

    想象一个场景,就是如何根据一张图片大概提取出它的主色调呢?获取主色调后,可能会用来设置某些背景颜色,这里,利用 JS 简单获取本地图片主色调,希望对大家有所帮助
    2023-03-03
  • 详解async/await 异步应用的常用场景

    详解async/await 异步应用的常用场景

    这篇文章主要介绍了详解async/await 异步应用的常用场景,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • js控制按钮,防止频繁点击响应的实例

    js控制按钮,防止频繁点击响应的实例

    下面小编就为大家带来一篇js控制按钮,防止频繁点击响应的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • JavaScript数组去重的几种方法详谈

    JavaScript数组去重的几种方法详谈

    这篇文章给大家总结下JavaScript数组去重的几种方法,面试中也经常会遇到这个问题。文中给大家引申的还有合并数组并去重的方法,感兴趣的朋友跟随脚本之家小编一起学习吧
    2021-10-10
  • js 获取当前web应用的上下文路径实现方法

    js 获取当前web应用的上下文路径实现方法

    下面小编就为大家带来一篇js 获取当前web应用的上下文路径实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JS中产生标识符方式的演变

    JS中产生标识符方式的演变

    本文记录下JS中产生标识符方式的演变,从ES5到ES6,ES5及其之前是一种方式,只包含两种声明(var/function),ES6则增加了一些产生标识符的关键字,如 let、const、class。
    2015-06-06
  • 如何基于viewport vm适配移动端页面

    如何基于viewport vm适配移动端页面

    这篇文章主要介绍了如何基于viewport vm适配移动端页面,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • 手把手教你做超酷的条形码效果

    手把手教你做超酷的条形码效果

    手把手教你做超酷的条形码效果...
    2007-04-04
  • JavaScript实现简单的倒计时效果

    JavaScript实现简单的倒计时效果

    这篇文章主要为大家详细介绍了JavaScript实现简单的倒计时效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06

最新评论