实现 Intl.segmenter 划分字词

geezmolycos · Mar 8, 2023 · 7c9feb2 · 7c9feb2
1 parent d49427c
commit 7c9feb2
Show file tree

Hide file tree

Showing 11 changed files with 36 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,14 +10,15 @@ All notable changes to the "vscode-hanzi-counter" extension will be documented i
 - twitter character count
 - 日本语较准确的「原稿用紙換算」
 - UTF-8 大小使用MKB等字母表示
-- 匹配unicode grapheme cluster而非codepoint
-  - 提供分词器，使用u+fdd0代表字符边界
+- 让使用 segmenter 的正则也可以高亮
+- 发布到open vsx上
 
 ## [1.3.0]
 
 - 为正则表达式加入匹配 Grapheme cluster / word / sentence 的选项
   - 使用正则表达式的命名表示需要不需要开启分词器
   - 使用 U+fdd0 和 U+fdd1 表示非单词边界和单词边界
+- 更改默认字符数为 grapheme cluster 数，另外提供 codepoint 数
 
 ## [1.2.0] - 2023-02-25
 

diff --git a/README.md b/README.md
@@ -17,22 +17,17 @@ The author hasn't learned Japanese or Korean language, but the character/word co
 - 可使用 Javascript 自定义状态栏上、悬浮提示中显示的内容；使用正则表达式自主添加统计规则。自主编写规则、更改格式，可以解决你个人统计字数的绝大部分需求。
 - 可以为不同编程语言配置不同设置，或启用禁用显示。
 - 有丰富的预设配置，方便不同国家、不同语言用户使用。将来还会编写配置教程和英文描述。
+- 使用 `Intl.Segmenter` 划分字词，组合字符可以合起来统计，支持emoji
 
-### 暂时的缺陷
+## 图片展示
 
-- 因为是使用正则表达式，目前没有合理切分各类组合字符。现在的「字符数」其实是Unicode code point的数量。一些组合字符和表情符号可能计数不准。未来可能会解决。
+![中文界面](images/screenshot-tooltip.png)
+![English](images/screenshot-tooltip-english.png)
+![高亮](images/screenshot-highlight.png)
 
 ## 功能
 
-在状态栏上显示文档字数，鼠标移动到字数上，会显示详细统计信息。所有内容均可自定义，默认设置包括以下内容：
-
-- 单词数
-- 非 ASCII 字符数
-- 中文字数
-- 中文字数（含标点）
-- UTF-8 大小
-- 非空白字符数
-- 总字符数
+在状态栏上显示文档字数，鼠标移动到字数上，会显示详细统计信息。所有内容均可自定义。
 
 点击对应项目的数字可以高亮匹配的文字，在右边的滚动条上也会标记出匹配文字所在的位置
 

diff --git a/images/screenshot-highlight.png b/images/screenshot-highlight.png
diff --git a/images/screenshot-tooltip-english.png b/images/screenshot-tooltip-english.png
diff --git a/images/screenshot-tooltip.png b/images/screenshot-tooltip.png
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "regex"
   ],
   "description": "多功能文档字数统计，支持中文、日文、朝鲜/韩文，支持选区统计，点击即可高亮，也可用正则表达式自定义要统计的内容。\n\n中国語/日本語/朝鮮/韓国語文字数計算ツール。중국어/일본어/한국어/조선어 세기 도구.\n\nCustomizable word counter with great support of Chinese characters (Hanzi), Japanese and Korean. Supports count in selection. Supports highlighting. Use custom regexes to match any character type you want.",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "publisher": "geezmolycos",
   "engines": {
     "vscode": "^1.74.0"
@@ -70,7 +70,7 @@
             "type": "string"
           },
           "default": {
-            "dev@wen": "[\\u{fdd0}\\u{fdd1}]",
+            "dev@w": "[\\u{fdd0}\\u{fdd1}]",
             "simple_word": "[\\p{L}\\p{Pc}\\p{N}]+",
             "spaced_word": "(?:\\S*[\\p{L}\\p{Pc}\\p{N}]\\S*)",
             "letter": "\\p{L}",
@@ -80,7 +80,10 @@
             "symbol": "\\p{S}",
             "nonwhite": "\\S",
             "white": "\\s",
-            "character": "[\\u{0000}-\\u{10ffff}]",
+            "character@g": "\\u{fdd0}",
+            "segmenter_word@w": "\\u{fdd1}",
+            "segmenter_sentence@s": "\\u{fdd0}",
+            "codepoint": "[\\u{0000}-\\u{10ffff}]",
             "nonascii": "\\P{ASCII}",
             "han": "(?=\\p{scx=Han})(?=\\p{L}).",
             "han_punct": "(?=\\p{scx=Han}|\\p{scx=Common})(?=\\p{P}|\\p{S}|\\p{N}).",
@@ -111,10 +114,10 @@
             "kr": "{/* ==> 한국어/조선어 Korean <== */const prefix = '<table width=\"100%\"><tbody>';const suffix = '</tbody></table>';return prefix+ this.tableRow('단어수:', spaced_word, '\"spaced_word\"')+ this.tableRow('비ASCII 글자수:', nonascii, '\"nonascii\"')+ this.tableRow('한글 글자수(구두점 아님):', hangul, '[[\"hangul\"],[],[],[],[],[],[]]')+ this.tableRow('한글 글자수:', hangul + hangul_punct, '[[\"hangul\"],[],[],[],[\"hangul_punct\"],[],[]]')+ this.tableRow('한자와 한글수:', han + hangul + hangul_punct, '[[\"hangul\"],[\"han\"],[],[],[\"hangul_punct\"],[],[]]')+ this.tableRow('CJK문자수:', cjk, '[[\"cjk\"],[\"han\"],[],[\"hiragana\"],[\"hangul\"],[\"katakana\"],[]]')+ this.tableRow('공백이 아닌 문자수:', nonwhite, '\"nonwhite\"')+ this.tableRow('UTF-8:', utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4, '[[\"utf8_1\"],[\"utf8_4\"],[],[],[\"utf8_3\"],[\"utf8_2\"],[]]', `${utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4} (${utf8_1}/${utf8_2}/${utf8_3}/${utf8_4})`)+ this.tableRow('총문자수:', character)+ suffix + '\\n\\n'+ this.paging.generate('kr');}",
             "overview": "/* ==> 功能概览 Feature overview <== */`欢迎使用，下面向你展示该字数统计扩展的功能。\\n\\n修改文件时，以下内容会随字数变化而变化：\\n- 单词数：[${spaced_word}](command:vscode-hanzi-counter.highlight?%5B%22spaced_word%22%5D)\\n- 汉字数(包括标点)：[${han + han_punct}](command:vscode-hanzi-counter.highlight?%5B${encodeURIComponent('[[\"han\"],[],[\"han_punct\"],[],[],[],[]]')}%5D)\\n\\n点击上面的数字，可以高亮对应的文本。\\n\\n使用前要先[设置默认提示框模板](command:workbench.action.openSettings?${encodeURIComponent('[\"vscode-hanzi-counter.template\"]')})。\\n\\n将 \\`Tooltip Template Name\\` 设置为 \\`Templates\\` 设置中想要显示的某一项的名字（靠前的一列）即可。\\n\\nWelcome to use. This page is a little demo of the extension capabilities. \\n\\nThe following items will update as you modify the file:\\n- Words: [${spaced_word}](command:vscode-hanzi-counter.highlight?%5B%22spaced_word%22%5D)\\n- Letters & Punctuations: [${letter + punct}](command:vscode-hanzi-counter.highlight?%5B${encodeURIComponent('[[\"letter\"],[],[\"punct\"],[],[],[],[]]')}%5D)\\n\\nYou can click the number shown above to highlight relevant text in the document.\\n\\nBefore starting to use, you need to [select the default tooltip template](command:workbench.action.openSettings?${encodeURIComponent('[\"vscode-hanzi-counter.template\"]')}) to show in the tooltip.\\n\\nChange \\`Tooltip Template Name\\` to one item of the \\`Items\\` column of \\`Templates\\` setting.\\nChange \\`StatusBar Template Name\\` to \\`status-bar\\` for English display on status bar.\\n\\n${this.paging.generate('overview')}`",
             "status-bar-zh": "{/* ==> 中文状态栏 Chinese Status bar <== */this.hlitMax = Infinity;this.tableRow = (str, value, hlit, display) => ('<tr>'+ `<td>${str}</td>`+ (hlit && value < this.hlitMax? `<td align=\"right\"><a href=\"command:vscode-hanzi-counter.highlight?%5B${encodeURIComponent(hlit)}%5D\">${display || value}</a></td>`: `<td align=\"right\">${display || value}</td>`) + '\\n');this.paging = this.paging || {'list': [['western', '西'],['zh-hans', '简'],['zh-hant', '繁'],['jp', '日'],['kr', '韩'],],'generate': function (current, lang=1){return '<div align=\"center\">[ ' + this.list.map(e =>e[0] !== current? `<a href=\"command:vscode-hanzi-counter.changeTooltip?%5B%22${e[0]}%22%5D\">${e[lang]}</a>`: `${e[lang]}`).join(' &#124; ') + ' ]</div>';}};return `$(pencil) ${character} 字符`;}",
-            "status-bar": "{/* ==> 英文状态栏 English Status bar <== */this.hlitMax = Infinity; this.tableRow = (str, value, hlit, display) => ('<tr>'+ `<td>${str}</td>`+ (hlit && value < this.hlitMax? `<td align=\"right\"><a href=\"command:vscode-hanzi-counter.highlight?%5B${encodeURIComponent(hlit)}%5D\">${display || value}</a></td>`: `<td align=\"right\">${display || value}</td>`) + '\\n');this.paging = this.paging || {'list': [['western', 'West'],['zh-hans', 'Chs'],['zh-hant', 'Cht'],['jp', 'JP'],['kr', 'KR'],],'generate': function (current, lang=1){return '<div align=\"center\">[ ' + this.list.map(e =>e[0] !== current? `<a href=\"command:vscode-hanzi-counter.changeTooltip?%5B%22${e[0]}%22%5D\">${e[lang]}</a>`: `${e[lang]}`).join(' &#124; ') + ' ]</div>';}};return `$(pencil) Chars: ${character}`;}",
-            "western": "{/* ==> 西文 Western languages <== */const prefix = '<table width=\"100%\"><tbody>';const suffix = '</tbody></table>';return prefix+ this.tableRow('Spaced words:', spaced_word, '\"spaced_word\"')+ this.tableRow('Simple words:', simple_word, '\"simple_word\"')+ this.tableRow('Non-ASCII:', nonascii, '\"nonascii\"')+ this.tableRow('Letters:', letter, '\"letter\"')+ this.tableRow('Puncts+Symbols:', punct + symbol, '[[],[],[],[\"punct\"],[],[\"symbol\"],[]]', `${punct}+${symbol}=${punct + symbol}`)+ this.tableRow('Non-white:', nonwhite, '\"nonwhite\"')+ this.tableRow('UTF-8:', utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4, '[[\"utf8_1\"],[\"utf8_4\"],[],[],[\"utf8_3\"],[\"utf8_2\"],[]]', `${utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4} (${utf8_1}/${utf8_2}/${utf8_3}/${utf8_4})`)+ this.tableRow('Total:', character)+ suffix + '\\n\\n'+ this.paging.generate('zh_hans');}",
-            "zh-hans": "{/* ==> 简体中文 Simplified Chinese <== */const prefix = '<table width=\"100%\"><tbody>';const suffix = '</tbody></table>';return prefix+ this.tableRow('单词数:', spaced_word, '\"spaced_word\"')+ this.tableRow('非ASCII字符数:', nonascii, '\"nonascii\"')+ this.tableRow('中文字数:', han + han_punct, '[[\"han\"],[],[\"han_punct\"],[],[],[],[]]')+ this.tableRow('中文字数(不含标点):', han, '\"han\"')+ this.tableRow('CJK字符数:', cjk, '[[\"cjk\"],[\"han\"],[],[\"hiragana\"],[\"hangul\"],[\"katakana\"],[]]')+ this.tableRow('非空白字符数:', nonwhite, '\"nonwhite\"')+ this.tableRow('UTF-8:', utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4, '[[\"utf8_1\"],[\"utf8_4\"],[],[],[\"utf8_3\"],[\"utf8_2\"],[]]', `${utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4} (${utf8_1}/${utf8_2}/${utf8_3}/${utf8_4})`)+ this.tableRow('总字符数:', character)+ suffix + '\\n\\n'+ this.paging.generate('zh_hans');}",
-            "zh-hant": "{/* ==> 繁體中文 Traditional Chinese <== */const prefix = '<table width=\"100%\"><tbody>';const suffix = '</tbody></table>';return prefix+ this.tableRow('單詞數:', spaced_word, '\"spaced_word\"')+ this.tableRow('非ASCII字符數:', nonascii, '\"nonascii\"')+ this.tableRow('中文字數:', han + han_punct, '[[\"han\"],[],[\"han_punct\"],[],[],[],[]]')+ this.tableRow('中文字數(不含標點):', han, '\"han\"')+ this.tableRow('CJK字符數:', cjk, '[[\"cjk\"],[\"han\"],[],[\"hiragana\"],[\"hangul\"],[\"katakana\"],[]]')+ this.tableRow('非空白字符數:', nonwhite, '\"nonwhite\"')+ this.tableRow('UTF-8:', utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4, '[[\"utf8_1\"],[\"utf8_4\"],[],[],[\"utf8_3\"],[\"utf8_2\"],[]]', `${utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4} (${utf8_1}/${utf8_2}/${utf8_3}/${utf8_4})`)+ this.tableRow('總字符數:', character)+ suffix + '\\n\\n'+ this.paging.generate('zh_hant');}"
+            "status-bar": "{/* ==> 英文状态栏 English Status bar <== */this.hlitMax = Infinity; this.tableRow = (str, value, hlit, display) => ('<tr>'+ `<td>${str}</td>`+ (hlit && value < this.hlitMax? `<td align=\"right\"><a href=\"command:vscode-hanzi-counter.highlight?%5B${encodeURIComponent(hlit)}%5D\">${display || value}</a></td>`: `<td align=\"right\">${display || value}</td>`) + '\\n');this.paging = this.paging || {'list': [['western', 'West'],['zh-hans', 'ChS'],['zh-hant', 'ChT'],['jp', 'JP'],['kr', 'KR'],],'generate': function (current, lang=1){return '<div align=\"center\">[ ' + this.list.map(e =>e[0] !== current? `<a href=\"command:vscode-hanzi-counter.changeTooltip?%5B%22${e[0]}%22%5D\">${e[lang]}</a>`: `${e[lang]}`).join(' &#124; ') + ' ]</div>';}};return `$(pencil) Chars: ${character}`;}",
+            "western": "{/* ==> 西文 Western languages <== */const prefix = '<table width=\"100%\"><tbody>';const suffix = '</tbody></table>';return prefix+ this.tableRow('Spaced words:', spaced_word, '\"spaced_word\"')+ this.tableRow('Simple words:', simple_word, '\"simple_word\"')+ this.tableRow('Words:', segmenter_word)+ this.tableRow('Sentences:', segmenter_sentence)+ this.tableRow('Non-ASCII:', nonascii, '\"nonascii\"')+ this.tableRow('Letters:', letter, '\"letter\"')+ this.tableRow('Puncts+Symbols:', punct + symbol, '[[],[],[],[\"punct\"],[],[\"symbol\"],[]]', `${punct}+${symbol}=${punct + symbol}`)+ this.tableRow('Non-white:', nonwhite, '\"nonwhite\"')+ this.tableRow('UTF-8:', utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4, '[[\"utf8_1\"],[\"utf8_4\"],[],[],[\"utf8_3\"],[\"utf8_2\"],[]]', `${utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4} (${utf8_1}/${utf8_2}/${utf8_3}/${utf8_4})`)+ this.tableRow('Total:', character)+ suffix + '\\n\\n'+ this.paging.generate('western');}",
+            "zh-hans": "{/* ==> 简体中文 Simplified Chinese <== */const prefix = '<table width=\"100%\"><tbody>';const suffix = '</tbody></table>';return prefix+ this.tableRow('单词数:', spaced_word, '\"spaced_word\"')+ this.tableRow('非ASCII字符数:', nonascii, '\"nonascii\"')+ this.tableRow('中文字数:', han + han_punct, '[[\"han\"],[],[\"han_punct\"],[],[],[],[]]')+ this.tableRow('中文字数(不含标点):', han, '\"han\"')+ this.tableRow('CJK字符数:', cjk, '[[\"cjk\"],[\"han\"],[],[\"hiragana\"],[\"hangul\"],[\"katakana\"],[]]')+ this.tableRow('非空白字符数:', nonwhite, '\"nonwhite\"')+ this.tableRow('UTF-8:', utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4, '[[\"utf8_1\"],[\"utf8_4\"],[],[],[\"utf8_3\"],[\"utf8_2\"],[]]', `${utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4} (${utf8_1}/${utf8_2}/${utf8_3}/${utf8_4})`)+ this.tableRow('总字符数:', character)+ suffix + '\\n\\n'+ this.paging.generate('zh-hans');}",
+            "zh-hant": "{/* ==> 繁體中文 Traditional Chinese <== */const prefix = '<table width=\"100%\"><tbody>';const suffix = '</tbody></table>';return prefix+ this.tableRow('單詞數:', spaced_word, '\"spaced_word\"')+ this.tableRow('非ASCII字符數:', nonascii, '\"nonascii\"')+ this.tableRow('中文字數:', han + han_punct, '[[\"han\"],[],[\"han_punct\"],[],[],[],[]]')+ this.tableRow('中文字數(不含標點):', han, '\"han\"')+ this.tableRow('CJK字符數:', cjk, '[[\"cjk\"],[\"han\"],[],[\"hiragana\"],[\"hangul\"],[\"katakana\"],[]]')+ this.tableRow('非空白字符數:', nonwhite, '\"nonwhite\"')+ this.tableRow('UTF-8:', utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4, '[[\"utf8_1\"],[\"utf8_4\"],[],[],[\"utf8_3\"],[\"utf8_2\"],[]]', `${utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4} (${utf8_1}/${utf8_2}/${utf8_3}/${utf8_4})`)+ this.tableRow('總字符數:', character)+ suffix + '\\n\\n'+ this.paging.generate('zh-hant');}"
           },
           "markdownDescription": "Each item is a Javascript expression or code block that returns a markdown string. Items of `#vscode-hanzi-counter.counter.regexes#` can be used as variables. Restart for changes to take effect."
         },
@@ -129,7 +132,7 @@
           "type": "string",
           "scope": "language-overridable",
           "order": 12,
-          "default": "dev",
+          "default": "overview",
           "description": "Which template to use for default status bar item tooltip."
         }
       }

diff --git a/src/counter.ts b/src/counter.ts
@@ -1,5 +1,6 @@
 
 import * as vscode from 'vscode';
+import { DocumentCounter } from './documentCounter';
 
 const MAX_HIGHLIGHT_COUNT = 20000;
 const MAX_HIGHLIGHT_COUNT_VISIBLE = 20000;
@@ -39,6 +40,9 @@ export class Counter {
         this.templateParameters = [];
         for (let [k, v] of regexStrings){
             let result = k.split('@');
+            if (this.regexes.has(result[0])){
+                throw new Error(`regex table contains same keys "${result[0]}"`)
+            }
             if (result.length === 1){
                 // do not segment
                 this.regexes.set(result[0], new RegExp(v, 'gus'));
@@ -52,7 +56,7 @@ export class Counter {
                     ['s', 'sentence']
                 ]).get(result[1][0]);
                 if (granularity === undefined){
-                    throw new Error(`invalid granularity code for segment "${result[1][0]}" in regex "${k}"`);
+                    throw new Error(`invalid granularity code for segment "${result[1][0]}" in regex "${k}", it must be one of "gws"`);
                 }
                 let locale = result[1].substring(1) || undefined;
                 this.regexes.set(result[0], new RegExp(v, 'gus'));
@@ -143,7 +147,7 @@ export class Counter {
         } else {
             regexGroupList = regexNames as string[][];
         }
-        let regexGroups = regexGroupList.map(rList => rList.map(r => this.regexes.get(r)));
+        let regexGroups = regexGroupList.map(rList => rList.map(r => [this.regexes.get(r), this.segmenters.get(r)] as [RegExp, Intl.Segmenter | undefined]));
         let currentDocument = vscode.window.activeTextEditor?.document;
         if (currentDocument){
             let selections = vscode.window.activeTextEditor!.selections;
@@ -164,11 +168,12 @@ export class Counter {
                     continue;
                 }
                 let highlightRanges: vscode.Range[] = [];
-                for (let regex of regexes){
-                    if (!regex){
+                for (let regexSegmenter of regexes){
+                    if (!regexSegmenter[0]){
                         continue;
                     }
                     let addSelectionRangeHighlight = (selectionRange: vscode.Range, maxCount: number) => {
+                        let [regex, segmenter] = regexSegmenter;
                         let startOffset = currentDocument!.offsetAt(selectionRange.start);
                         let text = currentDocument!.getText(selectionRange);
                         for (let match of text.matchAll(regex!)){

diff --git a/templates/status-bar.js b/templates/status-bar.js
@@ -14,8 +14,8 @@
     this.paging = this.paging || {
         'list': [
             ['western', 'West'],
-            ['zh-hans', 'Chs'],
-            ['zh-hant', 'Cht'],
+            ['zh-hans', 'ChS'],
+            ['zh-hant', 'ChT'],
             ['jp', 'JP'],
             ['kr', 'KR'],
         ],

diff --git a/templates/western.js b/templates/western.js
@@ -5,12 +5,14 @@
     return prefix
         + this.tableRow('Spaced words:', spaced_word, '"spaced_word"')
         + this.tableRow('Simple words:', simple_word, '"simple_word"')
+        + this.tableRow('Words:', segmenter_word)
+        + this.tableRow('Sentences:', segmenter_sentence)
         + this.tableRow('Non-ASCII:', nonascii, '"nonascii"')
         + this.tableRow('Letters:', letter, '"letter"')
         + this.tableRow('Puncts+Symbols:', punct + symbol, '[[],[],[],["punct"],[],["symbol"],[]]', `${punct}+${symbol}=${punct + symbol}`)
         + this.tableRow('Non-white:', nonwhite, '"nonwhite"')
         + this.tableRow('UTF-8:', utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4, '[["utf8_1"],["utf8_4"],[],[],["utf8_3"],["utf8_2"],[]]', `${utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4} (${utf8_1}/${utf8_2}/${utf8_3}/${utf8_4})`)
         + this.tableRow('Total:', character)
         + suffix + '\n\n'
-        + this.paging.generate('zh_hans');
+        + this.paging.generate('western');
 }
diff --git a/templates/zh-hans.js b/templates/zh-hans.js
@@ -12,5 +12,5 @@
         + this.tableRow('UTF-8:', utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4, '[["utf8_1"],["utf8_4"],[],[],["utf8_3"],["utf8_2"],[]]', `${utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4} (${utf8_1}/${utf8_2}/${utf8_3}/${utf8_4})`)
         + this.tableRow('总字符数:', character)
         + suffix + '\n\n'
-        + this.paging.generate('zh_hans');
+        + this.paging.generate('zh-hans');
 }
diff --git a/templates/zh-hant.js b/templates/zh-hant.js
@@ -12,5 +12,5 @@
         + this.tableRow('UTF-8:', utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4, '[["utf8_1"],["utf8_4"],[],[],["utf8_3"],["utf8_2"],[]]', `${utf8_1 + utf8_2*2 + utf8_3*3 + utf8_4*4} (${utf8_1}/${utf8_2}/${utf8_3}/${utf8_4})`)
         + this.tableRow('總字符數:', character)
         + suffix + '\n\n'
-        + this.paging.generate('zh_hant');
+        + this.paging.generate('zh-hant');
 }