核心内容摘要
7x7x7x7：宇宙的低语，数字的奥秘，与无限可能的交响
本文简介点赞 关注 收藏 学会了这次要推荐一个在前端就能实现汉字转拼音的工具库 ——pinyin-pro。
这个库不止能把中文转成拼音输出还有拼音匹配、获取声母、获取韵母、获取拼音首字母等功能。
而且还是中文文档啦这不是废话吗先看看效果~pinyin-propinyin-pro包含了和拼音相关的大部分转换功能。
官方文档也写得很好案例也很全。
这里我就不在重复官方文档上面的案例了。
但有时候可能打开github有点困难所以本文把官方文档的参数部分搬过来。
特色功能获取汉字、词语、句子等多种格式的拼音获取声母获取韵母获取拼音首字母获取音调获取多音字的多种拼音支持人名姓氏模式支持自定义拼音支持字符串和数组两种输出形式支持拼音文本匹配功能安装npm install pinyin-pro # 或 yarn add pinyin-pro引入浏览器script引入:!-- 引入某个版本如
3.
0版本 -- script srchttps://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro
3.
0/dist/pinyin-pro.js/script !-- 或 -- !-- 引入最新版本 -- script srchttps://cdn.jsdelivr.net/gh/zh-lx/pinyin-prolatest/dist/pinyin-pro.js/script script var { pinyin } pinyinPro; pinyin(汉语拼音); // hàn yǔ pīn yīn /scriptESModule浏览器引入import { pinyin } from pinyin-pro pinyin(汉语拼音) // hàn yǔ pīn yīncommonjs 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输出的结果的信息拼音 / 声母 / 韵母 / 音调 / 首字母stringpinyin / initial / final / num / firstpinyintoneType音调输出形式(拼音符号 / 数字 / 不加音调)stringsymbol / num / nonesymboltype输出结果类型字符串/数组stringstring / arraystringmultiple输出多音字全部拼音仅在 word 为长度为 1 的汉字字符串时生效booleantrue / falsefalsemode拼音查找的模式常规模式 / 姓氏模式stringnormal / surnamenormalremoveNonZh是否输入字符串中将非汉字的字符过滤掉booleantrue / falsefalsenonZh定义非汉字字符的输出形式stringspaced / consecutive / removedspacedv是否将拼音 ü 替换为 vbooleantrue / falsefalse以上就是pinyin-pro的安装、引入和参数更多使用案例可以查看官方文档。
实时输出拼音简单介绍完pinyin-pro后我还想介绍几个HTML标签ruby、rp、rt。
ruby标签可以做注释很适合给汉字做注音。
ruby元素由一个或多个需要解释/发音的字符和一个提供该信息的rt元素组成还包括可选的rp元素定义当浏览器不支持 “ruby” 元素时显示的内容。
在支持ruby的浏览器是这样显示的ruby雷猴rp(/rprtleihou/rtrp)/rp/ruby不支持ruby的浏览器的显示效果需要注意的是注解要写在正文内容后面。
了解了pinyin-pro和ruby的用法我们尝试一下完成文章开头的那个效果。
prubyspanidtext/spanrp(/rprtidphoneticize/rtrp)/rp/ruby/pinputtypetextidinponinputtransition(this)scriptsrchttps://cdn.jsdelivr.net/gh/zh-lx/pinyin-prolatest/dist/pinyin-pro.js/scriptscriptconst{pinyin}pinyinProconsttextdocument.getElementById(text)constphoneticizedocument.getElementById(phoneticize)// 防抖处理lettimernullfunctiontransition(e){timerclearTimeout(timer)// 防抖处理timersetTimeout(function(){letrespinyin(e.value)// 汉字转拼音text.innerTexte.value// 在页面上展示输入的文本phoneticize.innerTextres// 在文本上面展示拼音},
}/script把代码放到本地运行一下吧~前端用pinyin-pro能高效实现汉字转拼音等功能落地时要考虑组件复用、快速部署的工程效率问题。
试试RollCode 低代码平台轻松搞定私有化部署、自定义组件、静态页面发布SSG SEO需求。
点赞 关注 收藏 学会了