汉字标注假名转换器
sunshj Lv4

kuroshiro是一款十分方便使用的日文转换注音工具,主要针对日文文本,进行到平假名、片假名及罗马字的转换,并支持注音假名、送假名 (旁注音)等注音模式。

汉字标注假名转换器

使用到的项目为kuroshirokuromoji

一、演示

你可以在这里查看我的演示。

二、搭建

导入kuroshiro.min.jskuroshiro-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 -->
<header>
<marquee>在线汉字标注假名工具</marquee>
</header>
<!-- main -->
<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 -->
<footer>
<!-- 版权信息 -->
<span>Copyright
&nbsp;2021-<span id="year"></span>&nbsp;<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();

// 初始化kuroshiro
let kuroshiro = new Kuroshiro();
// 初始化kuroshiro-analyzer-kuromoji
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个)

image

三、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
// normal (标准模式)
kuroshiro.convert("感じ取れたら手を繋ごう、重なるのは人生のライン and レミリア最高!", {mode:"okurigana", to:"hiragana"});

结果:かんじとれたらてをつなごう、かさなるのはじんせいのライン and レミリアさいこう!

1
2
// spaced (空格分组)
kuroshiro.convert("感じ取れたら手を繋ごう、重なるのは人生のライン and レミリア最高!", {mode:"okurigana", to:"hiragana"});

结果:かんじとれ たら て を つなご う 、 かさなる の は じんせい の ライン and レミ リア さいこう !

1
2
// okurigana (送假名)
kuroshiro.convert("感じ取れたら手を繋ごう、重なるのは人生のライン and レミリア最高!", {mode:"okurigana", to:"hiragana"});

结果:感(かん)じ取(と)れたら手(て)を繋(つな)ごう、重(かさ)なるのは人生(じんせい)のライン and レミリア最高(さいこう)!

1
2
// furigana (注音假名)
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”)。

 评论