iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

從零開始的JS學習之路系列 第 29

[Day29] 正規表達式 - 中英空白生成器實作

  • 分享至 

  • xImage
  •  

「曾經滄海難為水,中英不空眼睛痛」,每當看到文字沒對齊、段落沒縮排或者中文字遇英文字不加空白,就會感到焦慮。筆者雖然努力的想忽略,但還是被過去的職業病所困擾,想馬上把滑鼠點過去幫他編輯。

VScode 有 Prettier 可以做到自動排版,我卻還不會用程式幫別人加空白,想到這不禁潸然淚下。

來,今天就來做這件事。

進入主題,這幾天寫 String methods正規表達式發現似乎可以把加空白這件事情結合在一起。於是就開始找 RegExp 的字元類別character classes),也就是上一篇尾端有簡單介紹的,原本想好好介紹的但抱歉實在太多了

除了特殊字元,還有很多代表的符號列如一些較常用的:
x|y 符合 x 或 y,用 | 分隔字符,可以像這樣 w|x|y|z,一直或或或或或下去。
\d 符合數字 0-9
\s 符合空白
\w 符合數字跟字母與底線[A-Za-z0-9_]

先寫出會換置的 code,在 indesign 裡的寫法是 (?<=~K)(\d|[\l\u]) ,意即英文或數字左邊若為中字。
(?<=) 左合樣
\d 數字 0-9
|
[\l\u] 英文大小寫 [A-Za-z]

第二行是(\d|[\l\u])(?=~K),跟上段相同只是換成右合樣(?=)

準備好開始到 Javascript 改寫~

Unicode 中文字範圍

[\u4e00-\u9fa5] 依照自己目前涉略的部分,JS 似乎只能用\u**** 來代表某中字,沒有全中文字元這個字元類別,所以 google 到一個能代表中文範圍的方式。

ASCII 字元

\w 如前篇所說,代表 ASCII 字元,等同於[A-Za-z0-9_]。
所以生成下面的 regexp:

var re1 = /([\u4e00-\u9fa5])(\w+)/gi;
// /括號1($1)左合樣中文括號2($2)英數字/ gi是不區分大小寫
var re2 = /(\w+)([\u4e00-\u9fa5])/gi;
// /括號1($1)英數字,括號2($2)右合樣中文/ gi是不區分大小寫
var str2 = "JavaScript是Web的主要語言。近25";
var newstr2 = str2.replace(re, " $1 ");
console.log(newstr2);

天啊!成功加空白啦!!!(codepen 實作連結:中英空分生成器)
↓↓↓↓↓↓操作過程↓↓↓↓↓↓

從今天開始好好的加空白吧~
十年前曾在作文簿寫下,「盡自己的力量,讓世界有一點不一樣」眼泛淚光,覺得欣慰。

參考資料

MDN-正規表達式
wiki-正規表示式
前端藏寶圖系列 第 6 篇 深不可測的海 - Regular Expression
鄭RayLider


上一篇
[Day28] 正規表達式 Regular Expression
下一篇
[Day30] 前面就是終點,該寫什麼呢?
系列文
從零開始的JS學習之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
wendy
iT邦新手 2 級 ‧ 2021-10-14 22:09:58

我好像都中,我很抱歉

不介意你幫我編輯 謝謝=)

沒參賽,仍存在文章結尾的同學

Rex iT邦新手 3 級 ‧ 2021-10-14 22:42:34 檢舉

我很抱歉
接下來的三十篇妳可以用小弟做的糙code自己加惹。

0
Chiahsuan
iT邦新手 4 級 ‧ 2021-10-14 22:11:43

我可以預見鄭RayLider同學會白眼無限翻轉

Rex iT邦新手 3 級 ‧ 2021-10-14 22:42:06 檢舉

我很抱歉
前端藏寶圖系列作者!!(請收下我的膝蓋)
趁他還沒有留言的權限狂cue

0
南國安迪
iT邦新手 3 級 ‧ 2021-10-14 22:26:18

我很抱歉

Rex iT邦新手 3 級 ‧ 2021-10-14 22:34:46 檢舉

我很抱歉
寫文章的時候不小心按到地圖炮

我要留言

立即登入留言