汉字标注假名转换器
sunshj Lv5

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
<!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="main">
<h3 class="main-title"><span>汉字标注假名</span></h3>

<fieldset style="max-width: 600px;">
<legend>输入日文</legend>
<textarea id="input" rows="10" cols="50" placeholder="请输入或直接贴上日文,点击转换后会自动生成HTML标签"></textarea>
</fieldset>

<div>
<button id="clear">清空</button>
<button id="convert">转换</button>
</div>

<div>
<fieldset>
<legend>Ruby 格式</legend>
<textarea id="RubyOut" rows="10" cols="50"></textarea>
</fieldset>

<fieldset style="min-height: 100px;max-width: 600px;">
<legend>HTML 显示</legend>
<div id="HTMLOut"></div>
</fieldset>
</div>
</div>
<footer>
<!-- 版权信息 -->
<span>Copyright
&nbsp;2021-<span id="year"></span>&nbsp;<a href="//sunshj.top" target="blank" title="个人主页">sunshj.top</a>
</span>
</footer>

<script src="static/js/handle.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
* {
margin: 0;
padding: 0;
}

.main {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.main-title {
font-weight: bold;
margin: 10px;
margin-top: 10px;
position: relative;
padding: 0 65px;
text-align: center;
}

.main-title:before {
position: absolute;
top: calc(50% - 1px);
left: 0;
width: 100%;
height: 2px;
content: '';
background: #000;
}

.main-title span {
position: relative;
padding: 0 1em;
background: #fff;
}

textarea {
max-width: 600px;
max-height: 200px;
font-size: 16px;
resize: none;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
outline: none;
}

fieldset {
padding: 5px;
margin: 10px;
border: 1px solid #cccccc;
border-radius: 4px;

}

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;
float: right;

}

#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;
float: left;
}

#clear:active {
background-color: #ff0000;
box-shadow: 0 2px rgb(189, 189, 189);
transform: translateY(4px);
}

footer {
position: relative;
bottom: 0;
width: 100%;
height: 30px;
background-color: #f5f5f5;
text-align: center;
line-height: 30px;
font-size: 14px;
color: #666;
}

footer a {
text-decoration: none;
color: coral;
font-weight: bold;
}

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
let input = document.getElementById('input');
let RubyOut = document.getElementById('RubyOut');
let HTMLOut = document.getElementById('HTMLOut');
let convert = document.getElementById('convert');
let clear = document.getElementById('clear');
let year = document.getElementById("year");
year.innerHTML = new Date().getFullYear();

// 初始化kuroshiro
let kuroshiro = new Kuroshiro();
// 初始化kuroshiro-analyzer-kuromoji
kuroshiro.init(new KuromojiAnalyzer({
dictPath: "static/dict/"
}))
convert.addEventListener('click', function () {
kuroshiro.convert(input.value, {
mode: "furigana",
to: "hiragana"
}).then(function (converted) {
RubyOut.value = converted;
HTMLOut.innerHTML = converted;
});
});
clear.addEventListener('click', function () {
input.value = '';
RubyOut.value = '';
HTMLOut.innerHTML = '';
});

字典文件

下载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
// 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”)。

  • 本文标题:汉字标注假名转换器
  • 本文作者:sunshj
  • 创建时间:2022-02-28 12:21:21
  • 本文链接:https://me.sunshj.top/archives/kanjifurigana/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
 评论