前端中文汉字转拼音

2022/12/24 4:24:02

本文主要是介绍前端中文汉字转拼音,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

本文简介

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


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

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

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


先看看效果~

file



pinyin-pro

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

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

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


特色功能

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

安装

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

引入

浏览器 script 引入:

<!-- 引入某个版本,如3.5.0版本 -->
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro@3.5.0/dist/pinyin-pro.js"></script>

<!-- 或 -->

<!-- 引入最新版本 -->
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 的浏览器是这样显示的:

file

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

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

file


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



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

file

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

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


点赞 + 关注 + 收藏 = 学会了
代码仓库



这篇关于前端中文汉字转拼音的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程