本文简介
点赞 + 关注 + 珍藏 = 学会了
这次要举荐一个在前端就能实现 汉字转拼音 的工具库 —— pinyin-pro 。
这个库不止能把中文转成拼音输入，还有拼音匹配、获取声母、获取韵母、获取拼音首字母等性能。
而且还是中文文档啦 这不是废话吗？
先看看成果~
pinyin-pro
pinyin-pro 蕴含了和拼音相干的大部分转换性能。
官网文档也写得很好，案例也很全。这里我就不在反复官网文档下面的案例了。
但有时候可能关上github有点艰难，所以本文把官网文档的参数局部搬过去。
特色性能
- 获取汉字、词语、句子等多种格局的拼音
- 获取声母
- 获取韵母
- 获取拼音首字母
- 获取音调
- 获取多音字的多种拼音
- 反对人名姓氏模式
- 反对自定义拼音
- 反对字符串和数组两种输入模式
- 反对拼音文本匹配性能
装置
npm install pinyin-pro# 或yarn add pinyin-pro引入
浏览器 script 引入:
<!-- 引入某个版本，如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 引入：
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 将伪数组转换成数组》
点赞 + 关注 + 珍藏 = 学会了
代码仓库