<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>pinyin 获取汉字拼音</title>
<link rel="stylesheet" href="https://ss.netnr.com/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container-fluid">
<div class="row mt-3">
<div class="col-md mb-3">
<input class="form-control nr-text1 fs-4" placeholder="输入中文：重要重庆">
</div>
<div class="col-md mb-3">
<input class="form-control nr-text2 fs-4" placeholder="输入拼音：wang">
</div>
<div class="col-md-12 mb-3">
<textarea class="form-control fs-4" rows="13" placeholder="输出"></textarea>
</div>
</div>
</div>
<script src="https://demo.haoji.me/pinyinjs/dict/pinyin_dict_polyphone.js"></script>
<script src="https://demo.haoji.me/pinyinjs/dict/pinyin_dict_withtone.js"></script>
<script src="https://demo.haoji.me/pinyinjs/pinyinUtil.js"></script>
</body>
</html>
document.querySelector('.nr-text1').addEventListener('input', function () {
var val = this.value, out = [];
if (val != "") {
out.push(`首字母：${pinyinUtil.getFirstLetter(val, true)}`)
out.push(`带声调：${pinyinUtil.getPinyin(val, ' ', true, true)}`)
out.push(`不带声调：${pinyinUtil.getPinyin(val, ' ', false, true)}`)
}
document.querySelector('textarea').value = out.join('\n');
}, false);
document.querySelector('.nr-text2').addEventListener('input', function () {
var val = this.value, out = [];
if (val != "") {
var words = pinyinUtil.getHanzi(val).split(''), col = 9;
for (var i = 0; i < words.length; i += col) {
out.push(words.slice(i, i + col).join('\t'));
}
}
document.querySelector('textarea').value = out.join('\n');
}, false);