JavaScript实现汉字转拼音功能

喜欢ヅ旅行 2023-07-09 09:26 20阅读 0赞

今天笔者来与大家分享如何使用js来将汉字转拼音功能。

首先请大家下载需要引入的js文件【仅9kb】。  
下载地址：[https://download.csdn.net/download/weixin\_43606158/12198229][https_download.csdn.net_download_weixin_43606158_12198229]

> 也可以使用
> 
>     $ npm i wd-hanzi2pinyin
> 
> 放到项目依赖中

实现的效果【笔者没有将拼音隔开，你可以自行加入代码让其隔开。如果实在不会写请下方评论或私聊我吧。】：

> 小提示：如果想分开的话建议使用Pinyin.parse()方法。然后就考验你的js操作功底了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]  
使用方法【html小demo】：  
下方引入的./wdHanzi2pinyin.js你需要在笔者提供的资源处下载而后使用。

--------------------

### 进阶版本的。实时更新，请看这里: ###

最后的效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 1]

代码：

<!doctype html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> .wrapbox { margin: 80px auto; width: 640px; display: flex; flex-direction: column; align-items: center; } </style>
        <script src="./wdHanzi2pinyin.js"></script>
    </head>
    <body>
    <div class="wrapbox">
        <input type="text" id="input">
        <div id="text"></div>
    </div>
    <script> const inputEvent = document.getElementById('input'); const textEvent = document.getElementById('text'); // 有几个字就渲染几套这样的模板： // <ruby>漢 <rp>(</rp><rt>han</rt><rp>)</rp></ruby> // 传入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} <rp>(</rp><rt> ${ (parseItem.target).toLowerCase()} </rt><rp>)</rp> `; } 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); }) }) </script>
    </body>
    </html>

[https_download.csdn.net_download_weixin_43606158_12198229]: https://download.csdn.net/download/weixin_43606158/12198229
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200228153324665.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200228190635166.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA==,size_16,color_FFFFFF,t_70