前端中文汉字转拼音

前端中文汉字转拼音本文简介点赞 关注 收藏 学会了这次要推荐一个在前端就能实现 汉字转拼音 的工具库 pinyin pro 这个库不止能把中文转成拼音输出 还有拼音匹配 获取声母 获取韵母 获取拼音首字母等功能 而且还是中文文档啦 这不是

欢迎大家来到IT世界,在知识的湖畔探索吧!

本文简介

点赞 + 关注 + 收藏 = 学会了

这次要推荐一个在前端就能实现 汉字转拼音 的工具库 —— pinyin-pro 。

这个库不止能把中文转成拼音输出,还有拼音匹配、获取声母、获取韵母、获取拼音首字母等功能。

而且还是中文文档啦 这不是废话吗?

先看看效果~

前端中文汉字转拼音

pinyin-pro

pinyin-pro 包含了和拼音相关的大部分转换功能。

官方文档也写得很好,案例也很全。这里我就不在重复官方文档上面的案例了。

但有时候可能打开github有点困难,所以本文把官方文档的参数部分搬过来。

特色功能

  • 获取汉字、词语、句子等多种格式的拼音
  • 获取声母
  • 获取韵母
  • 获取拼音首字母
  • 获取音调
  • 获取多音字的多种拼音
  • 支持人名姓氏模式
  • 支持自定义拼音
  • 支持字符串和数组两种输出形式
  • 支持拼音文本匹配功能

安装

npm install pinyin-pro # 或 yarn add pinyin-pro 

欢迎大家来到IT世界,在知识的湖畔探索吧!

引入

浏览器 script 引入:

欢迎大家来到IT世界,在知识的湖畔探索吧!<!-- 引入某个版本,如3.5.0版本 --> <script src="https://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro@3.5.0/dist/pinyin-pro.js"></script> <!-- 或 --> <!-- 引入最新版本 --> <script src="https://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro@latest/dist/pinyin-pro.js"></script> <script> var { pinyin } = pinyinPro; pinyin('汉语拼音'); // 'hàn yǔ pīn yīn' </script> 

ESModule 浏览器引入:

import { pinyin } from 'pinyin-pro' pinyin('汉语拼音') // 'hàn yǔ pīn yīn' 

commonjs node 引入:

欢迎大家来到IT世界,在知识的湖畔探索吧!const { pinyin } = require('pinyin-pro') pinyin('汉语拼音') // 'hàn yǔ pīn yīn' 

动态导入:

import('pinyin-pro').then((exports) => { exports.pinyin('汉语拼音') // 'hàn yǔ pīn yīn' }) 

参数

pinyin(word, options) 接收两个参数

  • word:必填。String 类型,需要转化为拼音的中文
  • options:可选。Object 类型,用于配置各种输出形式,options 的键值配置如下:

参数

说明

类型

可选值

默认值

pattern

输出的结果的信息(拼音 / 声母 / 韵母 / 音调 / 首字母)

string

pinyin / initial / final / num / first

pinyin

toneType

音调输出形式(拼音符号 / 数字 / 不加音调)

string

symbol / num / none

symbol

type

输出结果类型(字符串/数组)

string

string / array

string

multiple

输出多音字全部拼音(仅在 word 为长度为 1 的汉字字符串时生效)

boolean

true / false

false

mode

拼音查找的模式(常规模式 / 姓氏模式)

string

normal / surname

normal

removeNonZh

是否输入字符串中将非汉字的字符过滤掉

boolean

true / false

false

nonZh

定义非汉字字符的输出形式

string

spaced / consecutive / removed

spaced

v

是否将拼音 ü 替换为 v

boolean

true / false

false

以上就是 pinyin-pro 的安装、引入和参数,更多使用案例可以查看官方文档。

实时输出拼音

简单介绍完 pinyin-pro 后,我还想介绍几个 HTML 标签:<ruby>、<rp>、<rt> 。

<ruby> 标签可以做注释,很适合给汉字做注音。

<ruby> 元素由一个或多个需要解释/发音的字符和一个提供该信息的 <rt> 元素组成,还包括可选的 <rp> 元素,定义当浏览器不支持 “ruby” 元素时显示的内容。

在支持 ruby 的浏览器是这样显示的:

前端中文汉字转拼音

<ruby> 雷猴<rp>(</rp><rt>leihou</rt><rp>)</rp> </ruby> 

不支持 ruby 的浏览器的显示效果:

前端中文汉字转拼音

需要注意的是,注解要写在正文内容后面。

了解了 pinyin-pro 和 <ruby> 的用法,我们尝试一下完成文章开头的那个效果。

前端中文汉字转拼音

<p> <ruby> <span id="text"></span><rp>(</rp><rt id="phoneticize"></rt><rp>)</rp> </ruby> </p> <input type="text" id="inp" oninput="transition(this)"> <script src="https://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro@latest/dist/pinyin-pro.js"></script> <script> const { pinyin } = pinyinPro const text = document.getElementById('text') const phoneticize = document.getElementById('phoneticize') // 防抖处理 let timer = null function transition(e) { timer && clearTimeout(timer) // 防抖处理 timer = setTimeout(function() { let res = pinyin(e.value) // 汉字转拼音 text.innerText = e.value // 在页面上展示输入的文本 phoneticize.innerText = res // 在文本上面展示拼音 }, 200) } </script> 

把代码放到本地运行一下吧~

推荐阅读

《JS 这次真的可以禁止常量修改了!》

《JS ES5 也可以创建常量?》

《Object.defineProperty 也能监听数组变化?》

《JS 将伪数组转换成数组》

点赞 + 关注 + 收藏 = 学会了

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/83550.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信