kuroshiro是一款十分方便使用的日文转换注音工具,主要针对日文文本,进行到平假名、片假名及罗马字的转换,并支持注音假名、送假名 (旁注音)等注音模式。
汉字标注假名转换器
使用到的项目为kuroshiro ,kuromoji
一、演示 你可以在这里 查看我的演示。
二、搭建 导入kuroshiro.min.js
和kuroshiro-analyzer-kuromoji.min.js
,其中kuroshiro.min.js
需要使用1.1.0
版本。可以直接通过CDN引入:
1 2 <script src="https://cdn.jsdelivr.net/npm/kuroshiro@1.1.0/dist/kuroshiro.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/kuroshiro-analyzer-kuromoji@1.1.0/dist/kuroshiro-analyzer-kuromoji.min.js"></script>
HTML代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <meta http-equiv ="X-UA-Compatible" content ="IE=edge" > <meta name ="viewport" content ="width=device-width, initial-scale=1.0" > <title > 汉字标注假名</title > <link rel ="shortcut icon" href ="static/img/favicon.png" type ="image/x-icon" > <link rel ="stylesheet" href ="static/css/style.css" > <script src ="static/js/kuroshiro.min.js" > </script > <script src ="static/js/kuroshiro-analyzer-kuromoji.min.js" > </script > </head > <body > <div class ="container" > <header > <marquee > 在线汉字标注假名工具</marquee > </header > <div class ="main" > <fieldset > <legend > 输入日文</legend > <textarea id ="input" rows ="10" cols ="50" placeholder ="请输入或直接贴上日文,点击转换后会自动生成HTML标签" > </textarea > </fieldset > <div > <button id ="clear" > 清空</button > <button id ="convert" > 转换</button > <button id ="copy" > 复制</button > </div > <div id ="alertmess" > </div > <div > <fieldset class ="Ruby" > <legend > Ruby 格式</legend > <textarea id ="RubyOut" rows ="10" cols ="50" > </textarea > </fieldset > <fieldset style ="min-height: 124px;" > <legend > HTML 显示</legend > <div id ="HTMLOut" > </div > </fieldset > </div > </div > <footer > <span > Copyright 2021-<span id ="year" > </span > <a href ="//sunshj.top" target ="blank" title ="个人主页" > sunshj.top</a > </span > </footer > </div > <script src ="static/js/main.js" > </script > </body > </html >
CSS样式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 * { margin : 0 ; padding : 0 ; } html ,body { height : 100% ; } .container { display : flex; flex-direction : column; height : 100% ; } header { flex : 0 0 auto; } marquee { display : block; background : linear-gradient (90deg , #53c9ffd5 , #ff6dc0 , #ffed4a , #53c9ffd5 ); position : relative; font-weight : bold; font-family : "Microsoft YaHei" ; background-size : 400% ; color : white; padding : 3px ; animation : animate 15s linear infinite; } @keyframes animate { 0% { background-position : 0% ; } 100% { background-position : 400% ; } } .main { flex : 1 0 auto; width : 100% ; display : flex; flex-direction : column; justify-content : center; align-items : center; } textarea { max-width : 400px ; max-height : 200px ; font-size : 16px ; resize : none; width : 100% ; height : 100% ; border : none; outline : none; } textarea ::-webkit-scrollbar { width : 6px ; height : 6px ; } textarea ::-webkit-scrollbar-thumb { border-radius : 3px ; -moz-border-radius : 3px ; -webkit-border-radius : 3px ; background-color : #c3c3c3 ; } textarea ::-webkit-scrollbar-track { background-color : transparent; } fieldset { padding : 5px ; margin : 10px ; border : 1px solid #cccccc ; border-radius : 4px ; max-width : 400px ; } fieldset legend { display : block; height : 24px ; line-height : 24px ; padding : 0px 5px ; font-weight : bold; border-radius : 4px ; background : #f2f2f2 ; font-family : "Microsoft YaHei" ; } #input { max-height : 160px ; } #convert { width : 80px ; height : 30px ; margin : 10px ; border : none; cursor : pointer; font-size : 16px ; font-weight : bold; background-color : #2ec033 ; color : white; border-radius : 5px ; } #convert :active { background-color : #2ec033 ; box-shadow : 0 2px rgb (189 , 189 , 189 ); transform : translateY (4px ); } #clear { width : 80px ; height : 30px ; margin : 10px ; border : none; cursor : pointer; font-size : 16px ; font-weight : bold; background-color : #ff0000 ; color : white; border-radius : 5px ; } #clear :active { background-color : #ff0000 ; box-shadow : 0 2px rgb (189 , 189 , 189 ); transform : translateY (4px ); } #copy { width : 80px ; height : 30px ; margin : 10px ; border : none; cursor : pointer; font-size : 16px ; font-weight : bold; background-color : #2e68c0 ; color : white; border-radius : 5px ; } #copy :active { background-color : #2e68c0 ; box-shadow : 0 2px rgb (189 , 189 , 189 ); transform : translateY (4px ); } footer { flex : 0 0 auto; width : 100% ; height : 30px ; background : #f5f5f5 ; text-align : center; line-height : 30px ; font-size : 14px ; color : #666 ; } footer a { text-decoration : none; color : coral; font-weight : bold; } #alertmess { position : fixed; top : 25% ; max-width : 100px ; border-radius : 8px ; padding : 10px 10px ; background : rgba (0 , 0 , 0 , 0.5 ); color : #fff ; font-size : 16px ; text-align : center; z-index : 999 ; display : none; }
js代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 let input = document .getElementById ('input' );let RubyOut = document .getElementById ('RubyOut' );let HTMLOut = document .getElementById ('HTMLOut' );let convert = document .getElementById ('convert' );let year = document .getElementById ("year" );let copy = document .getElementById ('copy' );let clear = document .getElementById ('clear' );let textarea = document .querySelector (".Ruby textarea" );year.innerHTML = new Date ().getFullYear (); let kuroshiro = new Kuroshiro ();kuroshiro.init (new KuromojiAnalyzer ({ dictPath : "static/dict/" })) input.onchange = function ( ) { if (input.value .length > 0 && (input.value .trim () != "" )) { convert.disabled = false ; convert.onclick = function ( ) { kuroshiro.convert (input.value , { mode : "furigana" , to : "hiragana" }).then (function (converted ) { RubyOut .value = converted.trim (); HTMLOut .innerHTML = converted; alertmess ('转换成功' ); }); } } else { convert.disabled = true ; } } copy.onclick = function ( ) { textarea.select (); if (document .execCommand ("copy" )) { alertmess ('复制成功' ); } } clear.onclick = function ( ) { input.value = '' ; RubyOut .value = '' ; HTMLOut .innerHTML = '' ; alertmess ('已清空' ); } function alertmess (mess ) { let alertmess = document .getElementById ('alertmess' ); alertmess.innerHTML = mess; alertmess.style .display = 'block' ; setTimeout (() => { alertmess.innerHTML = '' ; alertmess.style .display = 'none' ; }, 2000 ); }
字典文件 下载kuromoji 项目中dict
下的gz文件(共12个)
三、API说明
此处援引kuroshiro官网API说明
convert(str, [options]) 转换指定的字符串到指定的音节文字(可在选项中配置注音模式等设置)。
参数
str
- 将被转换的字符串。
options
- 可选 转换选项,见下表。
选项
类型
默认值
描述
to
String
‘hiragana’
目标音节文字 hiragana
(平假名), katakana
(片假名), romaji
(罗马字)
mode
String
‘normal’
转换模式 normal
(标准模式), spaced
(空格分组), okurigana
(送假名), furigana
(注音假名)
romajiSystem*
String
“hepburn”
罗马字体系 nippon
(日本式), passport
(护照式), hepburn
(平文式)
delimiter_start
String
’(‘
分隔符 (起始)
delimiter_end
String
’)’
分隔符 (结束)
**: romajiSystem
参数仅当to
参数设置为romaji
时生效。有关这一参数的更多信息, 请见 罗马字体系 *
示例
1 2 kuroshiro.convert ("感じ取れたら手を繋ごう、重なるのは人生のライン and レミリア最高!" , {mode :"okurigana" , to :"hiragana" });
结果:かんじとれたらてをつなごう、かさなるのはじんせいのライン and レミリアさいこう!
1 2 kuroshiro.convert ("感じ取れたら手を繋ごう、重なるのは人生のライン and レミリア最高!" , {mode :"okurigana" , to :"hiragana" });
结果:かんじとれ たら て を つなご う 、 かさなる の は じんせい の ライン and レミ リア さいこう !
1 2 kuroshiro.convert ("感じ取れたら手を繋ごう、重なるのは人生のライン and レミリア最高!" , {mode :"okurigana" , to :"hiragana" });
结果:感(かん)じ取(と)れたら手(て)を繋(つな)ごう、重(かさ)なるのは人生(じんせい)のライン and レミリア最高(さいこう)!
1 2 kuroshiro.convert ("感じ取れたら手を繋ごう、重なるのは人生のライン and レミリア最高!" , {mode :"furigana" , to :"hiragana" });
结果:感( かん ) じ取( と ) れたら手( て ) を繋( つな ) ごう、重( かさ ) なるのは人生( じんせい ) のライン and レミリア最高( さいこう ) !
实用工具 示例
1 const result = Kuroshiro.Util.isHiragana("あ"));
isHiragana(char) 判断输入字符是否是平假名。
isKatakana(char) 判断输入字符是否是片假名。
isKana(char) 判断输入字符是否是假名。
isKanji(char) 判断输入字符是否是日文汉字。
isJapanese(char) 判断输入字符是否是日文。
hasHiragana(str) 检查输入字符串中是否含有平假名。
hasKatakana(str) 检查输入字符串中是否含有片假名。
hasKana(str) 检查输入字符串中是否含有假名。
hasKanji(str) 检查输入字符串中是否含有日文汉字。
hasJapanese(str) 检查输入字符串中是否含有日文。
kanaToHiragna(str) 转换输入假名字符串至平假名。
kanaToKatakana(str) 转换输入假名字符串至片假名。
kanaToRomaji(str, system) 转换输入假名字符串至罗马字。参数system
可选值为"nippon"
, "passport"
, "hepburn"
(默认值: “hepburn”)。