JavaScript实现汉字转拼音功能

吴迪98

于 2020-02-28 17:36:13 发布

阅读量2.6w

点赞数 3

分类专栏：项目实战吴小迪专栏之原生JS 文章标签：前端实现汉字转拼音汉字转拼音 js实现汉字转拼音功能 JavaScript实现转拼音

本文链接：https://blog.csdn.net/weixin_43606158/article/details/104557527

版权

吴小迪专栏之原生JS 同时被 2 个专栏收录

94 篇文章 32 订阅

订阅专栏

项目实战

38 篇文章 1 订阅

订阅专栏

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

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

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

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

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

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

<!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>
    <script src="./wdHanzi2pinyin.js"></script>
</head>
<body>
<input type="text" id="input">
<div id="text"></div>
<script>
    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())
    })
</script>
</body>
</html>

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

最后的效果：

在这里插入图片描述

代码：

<!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>

吴迪98

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
4
评论
JavaScript实现汉字转拼音功能

今天笔者来与大家分享如何使用js来将汉字转拼音功能。首先请大家下载需要引入的js文件【仅9kb】。实现的效果【笔者没有将拼音隔开，你可以自行加入代码让其隔开。如果实在不会写请下方评论或私聊我吧。】：小提示：如果想分开的话建议使用Pinyin.parse()方法。然后就考验你的js操作功底了。使用方法【html小demo】：下方引入的./wdHanzi2pinyin.js你需要在笔者...
复制链接

扫一扫