整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          手把手教你字符串分割技巧

          手把手教你字符串分割技巧

          家好,我是 Echa。

          假設(shè)我們現(xiàn)在有這樣一個(gè)需求,把一段話拆分成有意義的句子:

          你好,我是 Echa攻城獅小編。我來(lái)了!大佬是誰(shuí)?大佬在哪?

          你可能會(huì)第一時(shí)間想到,用 split 按所有可能斷句的標(biāo)點(diǎn)符號(hào)分割就好了,比如下面的代碼:

          var txt='你好,我是 Echa攻城獅小編。我來(lái)了!大佬是誰(shuí)?大佬在哪?'
          txt.split(/[。?!]/); 
          // ['你好,我是 Echa攻城獅小編', '我來(lái)了', '大佬是誰(shuí)', '大佬在哪', '']
          

          看起來(lái)結(jié)果還不錯(cuò),但是可以斷句的中文標(biāo)點(diǎn)符號(hào)只有這三個(gè)嗎?顯然不是,如果我們想要處理更復(fù)雜的文本,需要持續(xù)完善這個(gè)正則,另外這樣分割還有一個(gè)最大的問題是標(biāo)點(diǎn)符號(hào)會(huì)在分割后的結(jié)果中丟失。

          如果我們想要按詞語(yǔ)進(jìn)行分割,而不是語(yǔ)句呢?

          如果我們想要分割的文本是英語(yǔ)、阿拉伯語(yǔ)呢...

          // 中文
          const cn='你好,我是 Echa攻城獅小編。我來(lái)了!大佬是誰(shuí)?大佬在哪?';
          
          // 英文Hello, my name is Echa Attack Lion. I'm coming. Who is the 
          const en="boss? Where is the boss?";
          
          // 阿拉伯語(yǔ)
          const ar=' ????? ? ??? ???? ???? ????? .  ??? ????  ?? ?? ????? ?????? ?  ??? ????? ??????';
          

          這時(shí)候 split 可能就會(huì)表示無(wú)能為力了!

          Intl API

          IntlECMAScript 國(guó)際化 API 的一個(gè)命名空間,它提供了精確的字符串對(duì)比、數(shù)字格式化,和日期時(shí)間格式化能力。我們今天主要來(lái)看一下它提供的字符串分割能力!

          Intl.Segmenter 對(duì)象專門為語(yǔ)言敏感的文本分割而生,它允許你將一個(gè)字符串分割成有意義的片段(字、詞、句),下面我們看看它對(duì)以上三種語(yǔ)言的分割結(jié)果:

          中文

          const segmenter=new Intl.Segmenter(
            'zh', { granularity: 'sentence' }
          );
          
          console.log(
            Array.from(
              segmenter.segment('你好,我是 Echa攻城獅小編。我來(lái)了!大佬是誰(shuí)?大佬在哪?'),
              s=> s.segment
            )
          );
          //  ['你好,我是 Echa攻城獅小編。', '我來(lái)了!', '大佬是誰(shuí)?', '大佬在哪?']
          

          英語(yǔ)

          const segmenter=new Intl.Segmenter(
            'en', { granularity: 'sentence' }
          );
          
          console.log(
            Array.from(
              segmenter.segment(`Hello, my name is Echa Attack Lion. I'm coming. Who is the boss? Where is the boss?`),
              s=> s.segment
            )
          );
          //  ['Hello, my name is Echa Attack Lion. ', "I'm coming. ", 'Who is the boss? ', 'Where is the boss?']
          

          阿拉伯語(yǔ)

          const segmenter=new Intl.Segmenter(
            'ar', { granularity: 'sentence' }
          );
          
          console.log(
            Array.from(
              segmenter.segment(` ????? ? ??? ???? ???? ????? .  ??? ????  ?? ?? ????? ?????? ?  ??? ????? ??????`),
              s=> s.segment
            )
          );
          //  [' ????? ? ??? ???? ???? ????? .  ', '??? ????  ?? ?? ????? ?????? ?  ', '??? ????? ??????']

          Intl 的兼容性也還不錯(cuò),除了 Firefox 目前還沒有對(duì)它提供支持,其他的各大瀏覽器均已支持。


          下面我們來(lái)了解一些 Intl.Segmenter 的細(xì)節(jié)。

          構(gòu)造參數(shù)

          在上面的示例中,我們?cè)?Intl.Segmenter 的構(gòu)造函數(shù)傳入了兩個(gè)參數(shù)。

          第一個(gè)參數(shù)是語(yǔ)言地域編碼,結(jié)構(gòu)是:'語(yǔ)言編碼-地區(qū)編碼',因?yàn)橥瑯拥恼Z(yǔ)言在不同的地區(qū)也可能會(huì)有區(qū)別,比如下面的一些常見示例:

          • zh :中文
          • zh-CN :簡(jiǎn)體中文
          • zh-HK :香港地區(qū)的中文(繁體中文)
          • en :英語(yǔ)
          • en-US :美式英語(yǔ)
          • en-CB :英式英語(yǔ)

          第二個(gè)參數(shù)是一些更詳細(xì)的配置參數(shù),我們主要關(guān)注 granularity,它有三個(gè)值,分別表示我們要將字符串分割為句、詞、還是字:

          const segmenter=new Intl.Segmenter(
            'zh', { granularity: 'sentence' } // 句
          );
          //  ['你好,我是 Echa攻城獅小編。', '我來(lái)了!', '大佬是誰(shuí)?', '大佬在哪?']
          
          const segmenter=new Intl.Segmenter(
            'zh', { granularity: 'word' } // 詞
          );
          //  ['你好', ',', '我是', ' ', 'Echa', '攻城', '獅', '小', '編', '。', '我來(lái)', '了', '!', '大', '佬', '是', '誰(shuí)', '?', '大', '佬', '在', '哪', '?']
          
          const segmenter=new Intl.Segmenter(
            'zh', { granularity: 'grapheme' } // 字
          );
          // ['你', '好', ',', '我', '是', ' ', 'E', 'c', 'h', 'a', '攻', '城', '獅', '小', '編', '。', '我', '來(lái)', '了', '!', '大', '佬', '是', '誰(shuí)', '?', '大', '佬', '在', '哪', '?']
          

          返回值

          在上面的例子中可以發(fā)現(xiàn),我們使用 Array.from 對(duì) segment 的返回值進(jìn)行了處理:

          console.log(
            Array.from(
              segmenter.segment('你好,我是 Echa攻城獅小編。我來(lái)了!大佬是誰(shuí)?大佬在哪?'),
              s=> s.segment
            )
          );
          

          這是因?yàn)樗祷氐牟⒉皇且粋€(gè)數(shù)組,而是一個(gè) iterable 對(duì)象,如果訪問里面的字段,我可以用 for-of 或者使用 Array.from 函數(shù)轉(zhuǎn)換為數(shù)組。

          const segmenter=new Intl.Segmenter('zh', {
            granularity: 'sentence'
          });
          const segments=segmenter.segment('...');
          
          // 結(jié)構(gòu)轉(zhuǎn)為數(shù)組
          console.log([...segments]);
          
          // Array.from 轉(zhuǎn)為數(shù)組
          console.log(Array.from(segments));
          
          // for-of 遍歷
          for (let segment of segments) {
            console.log(segment);
          }
          

          完整的返回值包括分割后的字符、字符所在位置、輸入的完整內(nèi)容:


          另外,在前面的示例中,當(dāng)我們將文字分割為詞時(shí),可以發(fā)現(xiàn)標(biāo)點(diǎn)符號(hào)、空格等都被分割出來(lái)了:

          const segmenter=new Intl.Segmenter(
            'zh', { granularity: 'word' } // 詞
          );
          
          const result=segmenter.segment(`你好,我是 Echa攻城獅小編。', '我來(lái)了!', '大佬是誰(shuí)?', '大佬在哪?`)
          
          Array.from( result , s=> s.segment)
          
          //   ['你好', ',', '我是', ' ', 'Echa', '攻城', '獅', '小', '編', '。', "'", ',', ' ', "'", '我來(lái)', '了', '!', "'", ',', ' ', "'", '大', '佬', '是', '誰(shuí)', '?', "'", ',', ' ', "'", '大', '佬', '在', '哪', '?']
          

          這時(shí)返回值里還會(huì)包括一個(gè) isWordLike 屬性,可以用于過(guò)濾是否真的為詞語(yǔ):

          Array.from(result).filter(s=> s.isWordLike).map(s=> s.segment)
          // ['你好', '我是', 'Echa', '攻城', '獅', '小', '編', '我來(lái)', '了', '大', '佬', '是', '誰(shuí)', '大', '佬', '在', '哪']
          

          處理 emojis

          一般我們要處理的文本里如果包括了 emojis ,那問題就可能變得麻煩起來(lái)了...


          我們來(lái)看下面的示例:

          const str1='12345';
          const str2='12345?';
          
          console.log(str1.length); // 5
          console.log(str2.length); // 10
          
          str1.split('') 
          // ['1', '2', '3', '4', '5']
          str2.split('')
          // ['1', '2', '3', '4', '5', '\uD83D', '\uDE35', '?', '\uD83D', '\uDCAB']
          
          str2.replaceAll(/\D/g, '0')
          // '1234500000'
          

          為啥會(huì)出現(xiàn)這種現(xiàn)象呢?我們先來(lái)回顧一下計(jì)算機(jī)最基礎(chǔ)的概念:字符集與編碼:


          字符集 (Character Set) 是字符的集合,定義系統(tǒng)能處理哪些字符;編碼( Encoding)則規(guī)定這些字符在計(jì)算機(jī)內(nèi)部的表示方式。

          Unicode 是一套標(biāo)準(zhǔn),包含多語(yǔ)言統(tǒng)一的字符集及其相關(guān)編碼,以及在這個(gè)字符集上進(jìn)行文本處理的相關(guān)規(guī)則。

          Unicode 中,每個(gè)字符被分配了一個(gè)數(shù)值 (Code Point,代碼點(diǎn)) 和一個(gè)名稱。比如字母 A 的名稱是 LATIN CAPITAL LETTER A (大寫拉丁字母A)。它對(duì)應(yīng)的數(shù)值是 65,通常寫作 U+0041( 41 是十六進(jìn)制數(shù),等于 10 進(jìn)制的 65)。

          字素是文本在書寫時(shí)最小的單位,可以被理解為單獨(dú)的“字”。

          Unicode 標(biāo)準(zhǔn)中,字符(Character)一般指代碼點(diǎn)(Code Point)。通常,一個(gè)字素就是一個(gè)字符。但是,也有些字素是由多個(gè)字符序列組合而成的。比如字母 é 可以用字母 e (U+0065) 加上重音符 (U+0301) 組合而成。像重音符這樣用于修飾前一個(gè)字符的字符,被稱為組合字符(Combining Character)。

          比如你看到的這個(gè)字符:啊?????????????????????? ,就是個(gè)組合字符...

          現(xiàn)在對(duì)于上面的 emojis 出現(xiàn)的字符串分割問題是不是就容易理解了,因?yàn)楹芏?emojis 都是下面這樣的組合字符:

           + ?=?
           - U+1F3FB
          ? - U+270B
          ? - U+270B U+1F3FB
          
          '?'.split('') // ['?', '\uD83C', '\uDFFB']
          

          那么下面回歸正題了,Intl.Segmenter 的出現(xiàn)也可以解決這樣的組合字符的分割問題:

          '12345?'.split('')
          // ['1', '2', '3', '4', '5', '\uD83D', '\uDE35', '?', '\uD83D', '\uDCAB']
          
          
          const segmenter=new Intl.Segmenter('en', {
            granularity: 'grapheme'
          });
          
          Array.from(
            segmenter.segment('12345?'),
            s=> s.segment
          )
          // ['1', '2', '3', '4', '5', '?']
          

          最后在多提一下,最近有一個(gè)新的 ECMAScript 提案,為正則表達(dá)式新增了一個(gè)新的標(biāo)識(shí)符 '/v' (目前已經(jīng)到達(dá) stage 3)就是用來(lái)解決正則中的組合字符匹配的問題的:

          '12345?'.replaceAll(/\D/g, '0')
          // '1234500000'
          
          
          '12345?'.replaceAll(/\D/gv, '0')
          // '123450'
          

          本來(lái)是講字符串分割的,寫著寫著有點(diǎn)跑偏了,大家湊合著看吧 ...

          最后

          參考鏈接:

          • https://deerchao.cn/blog/posts/unicode.html
          • https://2ality.com/2022/11/regexp-v-flag.html
          • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/Segmenter
          • https://www.stefanjudis.com/today-i-learned/how-to-split-javascript-strings-with-intl-segmenter/

          如果這篇文章幫助到了你,歡迎點(diǎn)贊和關(guān)注。



          種分割線Html代碼


          一、基本線條:

          1、<HR>


          2、align線條位置(可選left、right、center);width線條長(zhǎng)度;color顏色;size厚度

          <HRalign=center width=300 color=#987cb9SIZE=1>


          二、特效(效果并不是孤立的,可相互組合)


          1、兩頭漸變透明:

          <HR style="FILTER:alpha(opacity=100,finishopacity=0,style=2)" width="80%"color=#987cb9 SIZE=10>

          2、紡錘形:

          <HR style="FILTER:alpha(opacity=100,finishopacity=0,style=1)" width="80%"color=#987cb9 SIZE=3>

          3、右邊漸變透明:

          <HR style="FILTER:alpha(opacity=0,finishopacity=100,style=1)" width="80%"color=#987cb9 SIZE=3>

          4、左邊漸變透明:

          <HR style="border:1 dashed #987cb9" width="80%"color=#987cb9 SIZE=1>

          5、虛線:

          <HR style="border:3 double #987cb9" width="80%"color=#987cb9 SIZE=3>

          6、雙線:

          <HR style="FILTER:progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)"width="80%" color=#987cb9 SIZE=1>

          7、立體效果:

          <HR style="FILTER:progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)"width="80%" color=#987cb9 SIZE=1>

          8、鋼針效果:

          <table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">

          9.垂直分割線

          <table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">


          虛線的Html代碼

          HTML代碼:

          <hr style="border: 1px dotted #FF0000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">

          [Ctrl+A 全部選擇提示:你可先修改部分代碼,再按運(yùn)行]

          我們?nèi)粘5腏avaScript編程中,有時(shí)需要將一個(gè)字符串只拆分一次。本篇文章將介紹如何使用JavaScript實(shí)現(xiàn)這一需求。

          使用indexOf和slice方法拆分字符串

          要在JavaScript中只拆分一次字符串,我們可以結(jié)合使用 indexOf 方法和 slice 方法來(lái)實(shí)現(xiàn)。首先,利用 indexOf 找到分隔符首次出現(xiàn)的位置,然后使用 slice 方法進(jìn)行字符串的截取。

          舉個(gè)例子:

          const s="1|Ceci n'est pas une pipe: | Oui";
          const i=s.indexOf('|');
          const splits=[s.slice(0, i), s.slice(i + 1)];
          console.log(splits);

          在這個(gè)例子中,我們有一個(gè)字符串 s,需要在第一個(gè) | 處進(jìn)行拆分。

          1. 我們使用 indexOf 方法,傳入 | 作為參數(shù),找到 | 首次出現(xiàn)的位置,并將其索引存儲(chǔ)在變量 i 中。
          2. 然后使用 slice 方法,兩次截取字符串:
          3. 第一次使用 slice(0, i) 獲取 | 前面的子字符串。
          4. 第二次使用 slice(i + 1) 獲取 | 后面的子字符串。
          5. 最后,將兩個(gè)子字符串放入 splits 數(shù)組中。

          因此,最終的 splits 數(shù)組為:

          ["1", "Ceci n'est pas une pipe: | Oui"]

          結(jié)束

          通過(guò)結(jié)合使用 indexOf 方法和 slice 方法,我們可以在JavaScript中輕松實(shí)現(xiàn)字符串的單次拆分。希望這個(gè)技巧能對(duì)你的開發(fā)工作有所幫助。


          主站蜘蛛池模板: 日本精品一区二区三区视频| 天堂一区人妻无码| 久久国产精品亚洲一区二区| 无码国产精品一区二区免费I6| 伊人精品视频一区二区三区| 精品国产一区二区三区久久狼 | 一区二区三区人妻无码| 亚洲一区二区观看播放| 无码日韩精品一区二区三区免费 | 99国产精品一区二区| 在线观看精品一区| 亚洲国产精品一区二区三区在线观看 | 色久综合网精品一区二区| 一区二区国产精品| 亚洲乱码国产一区网址| 加勒比精品久久一区二区三区| 精品国产一区二区三区AV | eeuss鲁片一区二区三区| 亚洲AV成人一区二区三区观看| 国产成人精品日本亚洲专一区| 99精品国产高清一区二区三区| 中日av乱码一区二区三区乱码| 国产伦精品一区二区免费| 一区二区在线播放视频| 国产福利电影一区二区三区,免费久久久久久久精 | 色狠狠色狠狠综合一区| 亚洲一区二区免费视频| 亚洲国产高清在线精品一区| 亚洲天堂一区二区三区四区| 亚洲综合色一区二区三区| 精品国产一区在线观看| 高清无码一区二区在线观看吞精 | 无码成人一区二区| 韩国福利影视一区二区三区| 亚洲日韩一区二区三区| 国产一区二区好的精华液 | 日韩一区精品视频一区二区| 亚洲av乱码一区二区三区| 亚洲熟妇AV一区二区三区宅男| 精品一区狼人国产在线| 久久久久国产一区二区三区|