JavaScript實現(xiàn)清除首尾空白字符再進行空白匹配
更新時間：2025年12月24日 08:34:57 作者：豈不聞
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)清除首尾空白字符再進行空白匹配的相關方法,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下
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: '-' };
}
// 正則：匹配第一個左括號到第一個右括號之間的內(nèi)容
// - 姓名部分：任意字符（可為空）
// - 職位部分：不包含右括號的任意字符（可為空）
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*[(（]：跳過空格，匹配左括號([^)）]*)：關鍵！ 只匹配不包含右括號的內(nèi)容，確保在第一個右括號處停止\s*[)）]：跳過空格，匹配右括號- 不使用
$：避免因末尾空格或多余字符導致匹配失敗
調(diào)用方法輸出結果
console.log(parseNameAndJob("（產(chǎn)品經(jīng)理）"));
// 輸出: { name: '-', job: '產(chǎn)品經(jīng)理' }
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中判斷輸入的字符串是否為空？是否為數(shù)值？去掉首尾空格
Javascript中判斷輸入的字符串是否為空？為數(shù)值？去掉首尾空格是最常見的3個應用，但是如果一段時間不用，總會忘記，還是記下來比較好。
1. 是否為空？
太簡單了，取值判斷是否與""相等即可，示例函數(shù)如下：
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. 是否為數(shù)值？
使用isNaN(para)函數(shù)。該函數(shù)判斷para是否不是數(shù)值。示例函數(shù)如下：
function isNumber(num){
return !isNaN(para);
}直接判斷：
if(!isNan(document.getElementById(ctlID).value)) {...}3. 是否為整數(shù)？
1)直接法，用正則表達式：
function isInt(num) {
if (num.match(/^-?[0-9]+$/) == null) return false;
else return true;
}
2)間接法，用parseInt()方法。因為整數(shù)字符串轉換為整數(shù)后長度不變，而其他情況長度會變化。所以可以用此判斷輸入是否為整數(shù)。
function isInt(num) {
var ctlInt = 1 + parseInt(ctlValue) ; //加1是為了去除負號“-”的影響
if(ctlInt == ctlValue) return true;
else return false;
}4. 是否為浮點數(shù)？
用“3.”的直接法，只要更換相應的正則表達式即可，如：
- ^/d+$" //非負整數(shù)（正整數(shù) + 0）
- ^[0-9]*[1-9][0-9]*$" //正整數(shù)
- ^((-/d+)|(0+))$" //非正整數(shù)（負整數(shù) + 0）
- ^-[0-9]*[1-9][0-9]*$" //負整數(shù)
- ^-?/d+$" //整數(shù)
- ^/d+(/./d+)?$" //非負浮點數(shù)（正浮點數(shù) + 0）
- ^(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*))$" //正浮點數(shù)
- ^((-/d+(/./d+)?)|(0+(/.0+)?))$" //非正浮點數(shù)（負浮點數(shù) + 0）
- ^(-(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*)))$" //負浮點數(shù)
- ^(-?/d+)(/./d+)?$" //浮點數(shù)
備注：即使判斷同一種對象，正則表達式的寫法也有多種，優(yōu)劣只能自己判斷。
5. 去除首尾空格
用正則表達式：
1)原型法，也就是為字符串類型提供去掉首尾空格的函數(shù)：
String.prototype.trim = function() {
return this.replace(/(^/s*)|(/s*$)/g, "");
}
2)一般函數(shù)，返回去掉首尾空格后的字符串：
function trim(str) {
return str.replace(/(^/s*)|(/s*$)/g, "");
}
到此這篇關于JavaScript實現(xiàn)清除首尾空白字符再進行空白匹配的文章就介紹到這了,更多相關JavaScript清除首尾空白字符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了Bootstrap縮略圖與警告框學習使用的相關資料，希望通過這篇文章和大家更多的去學習Bootstrap縮略圖與警告框，從中得到收獲2017-02-02
本文主要介紹了JS調(diào)用Android、Ios通信的相同點和不同點，以便幫助我們在進行混合式開發(fā)時，提高代碼質(zhì)量，實現(xiàn)兩者在網(wǎng)頁端代碼的統(tǒng)一。下面跟著小編一起來看下吧2017-01-01
使用枚舉我們可以定義一些帶名字的常量,本文主要介紹了typescript枚舉的具體使用,具有一定的參考價值,感興趣的可以了解一下2023-09-09
這篇文章主要介紹了微信小程序 如何保持登錄狀態(tài),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細介紹了BootStrap整體框架之基礎布局組件的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這個select2組件的功能確實很強大，可以將圖片放入到select里面隨著文字一起顯示。接下來通過本文給大家分享BootStrap與Select2使用小結，需要的朋友參考下2017-02-02
用javascrpt將指定網(wǎng)頁保存為Excel的代碼
這段代碼在服務器中沒有權限，可以保存在本地，存為htm文件，運行即可，就可以把文本內(nèi)容存為excel文件了2008-01-01
身份證號碼驗證-支持新的帶x身份證2008-08-08
JavaScript?Canvas實現(xiàn)圖片局部放大鏡效果
這篇文章主要為大家詳細介紹了如何使用JavaScript?Canvas實現(xiàn)圖片局部放大鏡效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
這篇文章主要為大家詳細介紹了JavaScript面向對象編寫購物車功能的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08