关于前端:前端中文汉字转拼音

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

这次要举荐一个在前端就能实现 汉字转拼音 的工具库 —— 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 将伪数组转换成数组》

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

关于前端:前端中文汉字转拼音

本文简介

pinyin-pro

特色性能

装置

引入

参数

实时输入拼音

举荐浏览