JavaScript实现汉字转拼音功能
今天笔者来与大家分享如何使用js来将汉字转拼音功能。
首先请大家下载需要引入的js文件【仅9kb】。
下载地址：https://download.csdn.net/download/weixin_43606158/12198229
实现的效果【笔者没有将拼音隔开，你可以自行加入代码让其隔开。如果实在不会写请下方评论或私聊我吧。】：
小提示：如果想分开的话建议使用Pinyin.parse()方法。然后就考验你的js操作功底了。
使用方法【html小demo】：
下方引入的./wdHanzi2pinyin.js你需要在笔者提供的资源处下载而后使用。
Document
const inputEvent = document.getElementById('input');
const textEvent = document.getElementById('text');
inputEvent.addEventListener('keyup', (event) => {
console.log(Pinyin.parse(event.target.value))
textEvent.innerText = (Pinyin.convertToPinyin(event.target.value).toLowerCase())
})
进阶版本的。实时更新，请看这里:
最后的效果：
代码：
Document
.wrapbox {
margin: 80px auto;
width: 640px;
display: flex;
flex-direction: column;
align-items: center;
}
const inputEvent = document.getElementById('input');
const textEvent = document.getElementById('text');
// 有几个字就渲染几套这样的模板：
// 漢 (han)
// 传入value数组格式。就是使用Pinyin.parse解析出来的
// {
// source: "打"
// type: 2 type为2是汉字，为1则是其他
// target: "DA"
// }
function buildingRubys(parseItem) {
let ruby = document.createElement('ruby');
ruby.style.margin = '2px';
if (parseItem.type === 2) {
ruby.innerHTML = `
${parseItem.source}
(
${(parseItem.target).toLowerCase()}
)
`;
} else {
ruby.innerHTML = `${parseItem.source}`;
}
textEvent.appendChild(ruby);
}
inputEvent.addEventListener('change', (event) => {
textEvent.innerHTML = '';
const arr = Pinyin.parse(event.target.value) || [];
arr.forEach((item) => {
buildingRubys(item);
})
})
作者：超级吴小迪
相关文章
Maren
2021-03-05
Diane
2023-05-18
Kande
2023-05-18
Ula
2023-05-18
Rose
2023-05-18
Antonia
2023-05-18
Thalia
2023-05-18
Kefira
2023-05-18
Jacinthe
2023-05-18
Viridis
2023-05-18
Kohana
2023-07-20
Hellens
2023-07-20
Rayna
2023-07-20
Angie
2023-07-20
Edie
2023-07-20
Radinka
2023-07-20
Tesia
2023-07-20