js实现中文转拼音的完整步骤记录

使用js搞了一个中文转拼音的包,仓库地址可见:pinyin-pro

特色功能

  • 支持汉字、词语、句子多种格式输入获取
  • 获取拼音
  • 获取声母
  • 获取韵母
  • 获取拼音首字母
  • 获取音调
  • 获取多音字的多种拼音
  • 支持字符串和数组两种输出形式

安装

npm 安装

npm install pinyin-pro

yarn 安装

yarn add pinyin-pro

引入

浏览器 script 引入:

<!--引入某个版本,如3.2.0版本-->
<!-- <script src="https://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro@3.2.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 引入:

const { pinyin } = require('pinyin-pro');
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

使用示例

获取拼音

import { pinyin } from 'pinyin-pro';

// 获取带音调拼音
pinyin('汉语拼音'); // 'hàn yǔ pīn yīn'
// 获取不带声调的拼音
pinyin('汉语拼音', { toneType: 'none' }); // 'han yu pin yin'
// 获取声调转换为数字后缀的拼音
pinyin('汉语拼音', { toneType: 'num' }); // 'han4 yu3 pin1 yin1'
// 获取数组形式带音调拼音
pinyin('汉语拼音', { type: 'array' }); // ["hàn", "yǔ", "pīn", "yīn"]
// 获取数组形式不带声调的拼音
pinyin('汉语拼音', { toneType: 'none', type: 'array' }); // ["han", "yu", "pin", "yin"]
// 获取数组形式声调转换为数字后缀的拼音
pinyin('汉语拼音', { toneType: 'num', type: 'array' }); // ["han4", "yu3", "pin1", "yin1"]

获取声母

import { pinyin } from 'pinyin-pro';

// 获取声母
pinyin('汉语拼音', { pattern: 'initial' }); // 'h y p y'
// 获取数组形式声母
pinyin('汉语拼音', { pattern: 'initial', type: 'array' }); // ["h", "y", "p", "y"]

获取韵母

import { pinyin } from 'pinyin-pro';

// 获取带音调韵母
pinyin('汉语拼音', { pattern: 'final' }); // 'àn ǔ īn īn'
// 获取不带音调韵母
pinyin('汉语拼音', { pattern: 'final', toneType: 'none' }); // 'an u in in'
// 获取音调为数字的韵母
pinyin('汉语拼音', { pattern: 'final', toneType: 'num' }); // 'an4 u3 in1 in1'
// 获取数组形式带音调韵母
pinyin('汉语拼音', { pattern: 'final', type: 'array' }); // ["àn", "ǔ", "īn", "īn"]
// 获取数组形式不带音调韵母
pinyin('汉语拼音', { pattern: 'final', toneType: 'none', type: 'array' }); // ["an", "u", "in", "in"]
// 获取数组形式音调为数字的韵母
pinyin('汉语拼音', { pattern: 'final', toneType: 'num', type: 'array' }); // ['an4', 'u3', 'in1', 'in1']

获取音调

import { pinyin } from 'pinyin-pro';

// 获取音调
pinyin('汉语拼音', { pattern: 'num' }); // '4 3 1 1'
// 获取数组形式音调
pinyin('汉语拼音', { pattern: 'num', type: 'array' }); // ["4", "3", "1", "1"]

获取拼音首字母

import { pinyin } from 'pinyin-pro';

// 获取拼音首字母
pinyin('赵钱孙李额', { pattern: 'first' }); // 'z q s l é'
// 获取不带音调拼音首字母
pinyin('赵钱孙李额', { pattern: 'first', toneType: 'none' }); // 'z q s l e'
// 获取数组形式拼音首字母
pinyin('赵钱孙李额', { pattern: 'first', type: 'array' }); // ['z', 'q', 's', 'l', 'é']
// 获取数组形式不带音调拼音首字母
pinyin('赵钱孙李额', { pattern: 'first', toneType: 'none', type: 'array' }); // ['z', 'q', 's', 'l', 'e']

获取单个字的多音

只有单字可以获取到多音模式, 词语、句子无效。同样可以通过配置 options 选项获取数组形式、韵母等格式

import { pinyin } from 'pinyin-pro';

// 获取多音
pinyin('好', { multiple: true }); // 'hǎo hào'
// 获取数组形式多音
pinyin('好', { multiple: true, type: 'array' }); // ["hǎo", "hào"]

总结

到此这篇关于js实现中文转拼音的文章就介绍到这了,更多相关js中文转拼音内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Extjs Gird 支持中文拼音排序实现代码

    复制代码 代码如下: <script type="text/javascript"> Ext.data.Store.prototype.applySort=function(){//重载applySort if(this.sortInfo && !this.remoteSort){ var s = this.sortInfo, f=s.field; var st=this.fields.get(f).sortType; var fn=function(r1,

  • js提取中文拼音首字母的封装工具类

    前言 本文主要记录了如何用js提前中文拼音首字母的方法.封装一个函数,假如有需要的,可以直接拿去用.下面话不多说了,来一起看看详细的介绍吧. 原理 主要是根据中文的unicode码来进行的.主要是在收集的中文范围内查找,大家可以多收集一些.假如中文是多音字,那可能有点坑了! var getPy = (function() { //函数使用,本表收录的字符的Unicode编码范围为19968至40869, XDesigner 整理 var strChineseFirstPY = "YDYQSXMW

  • js 获取中文拼音,Select自动匹配字母获取值的代码

    复制代码 代码如下: <script type="text/javascript"> var key2code = {65:"a",66:"b",67:"c",68:"d",69:"e",70:"f",71:"g",72:"h",73:"i",74:"j", 75:"

  • JavaScript 中文转拼音实现代码 有些bug

    1.问题背景: 在做项目时候遇到一个小小的显示客户部门名称(拼音)的业务,就是在部门名称下有相应的拼音,而在现有的数据库中没有相应字段,并且部门数量比较多,添加起来比较费时,就想能否在js中实现,在页面中处理. 2.原理描述 程序原理很简单,网上可以找到汉字拼音的数据字典,但是由于大家都知道GB2312编码里面汉字是按拼音排序的,只要知道各个拼音为首的汉字代码,就可以计算所有汉字的拼音代码了. 本文通过自定义用于存放汉字拼音与ascii码对应的数据字典,再通过将需要转换的汉字转为ascii码(两

  • JS实现中文汉字按拼音排序的方法

    本文实例讲述了JS实现中文汉字按拼音排序的方法.分享给大家供大家参考,具体如下: 代码1,拼音排序: var array = ['武汉', '北京', '上海', '天津']; var resultArray = array.sort( function compareFunction(param1, param2) { return param1.localeCompare(param2,"zh"); } ); console.log(resultArray); 火狐浏览器 resu

  • javascript实现获取中文汉字拼音首字母

    今天分享一个日常开发中可能会用到的一个小功能,简单说就是输入中文汉字可转换得到中文汉字拼音首字母.当然我可写不出这样的功能,源码来自于其他民间大神的分享,博主在此记录一下功能demo,方便日后复用,同时方便需要此功能的各位. 如下输入名字张三. 点击按钮获取,得到中文拼音首字母 博主整理了一下代码可阅读性,下面直接上代码. <!doctype html> <html> <head> <meta charset="UTF-8"> <t

  • JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】

    本文实例讲述了JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法.分享给大家供大家参考,具体如下: 实现效果: 图一: 图二: 此例中输入的中文字符串"万万保重",有三个字是多音字,所以alert对话框中显示的是多种读音的组合: 如何实现? 如何实现通过拼音首字母快速查找页面内的中文内容呢? 过程原理是这样的:例如要对一些人名进行快速查找,当页面加载完成后,对所有人名建立一个索引,生成拼音首字母与姓名的对应关系:然后监听键盘事件,当用户按下键盘时,根据键值得到按下的

  • javascript对中文按照拼音排序代码

    今天在代码中用到了对中文按照拼音排序,咨询了群里面的大神后得到了下面的代码: var arr = ["张三","李四","王五","阿三"]; document.write(arr+"<br/>"); arr.sort(function(a,b){ return a.localeCompare(b); }); document.write(arr);

  • js实现中文转拼音的完整步骤记录

    使用js搞了一个中文转拼音的包,仓库地址可见:pinyin-pro 特色功能 支持汉字.词语.句子多种格式输入获取 获取拼音 获取声母 获取韵母 获取拼音首字母 获取音调 获取多音字的多种拼音 支持字符串和数组两种输出形式 安装 npm 安装 npm install pinyin-pro yarn 安装 yarn add pinyin-pro 引入 浏览器 script 引入: <!--引入某个版本,如3.2.0版本--> <!-- <script src="https:

  • Java发起http请求的完整步骤记录

    前言 在未来做项目中,一些功能模块可能会采用不同的语言进行编写.这就需要http请求进行模块的调用.那么下面,我将以Java为例,详细说明如何发起http请求. 一.GET与POST GET和POST是HTTP的两个常用方法. GET指从指定的服务器中获取数据 POST指提交数据给指定的服务器处理 1.GET方法 使用GET方法,需要传递的参数被附加在URL地址后面一起发送到服务器. 例如:http://121.41.111.94/submit?name=zxy&age=21 特点: GET请求

  • Golang操作MySql数据库的完整步骤记录

    前言 MySQL是业界常用的关系型数据库,在平时开发中会经常与MySql数据库打交道,所以在接下来将介绍怎么使用Go语言操作MySql数据库. 下载MySql连接驱动 Go语言中的database/sql包提供了保证SQL或类SQL数据库的泛用接口,并不提供具体的数据库驱动.使用database/sql包时必须注入(至少)一个数据库驱动. 我们常用的数据库基本上都有完整的第三方实现.比如:MySQL驱动 **下载依赖** go get -u github.com/go-sql-driver/my

  • no-vnc和node.js实现web远程桌面的完整步骤

    引言 项目需求,要求在浏览器端进行远程桌面的访问,如图所示: 实现远程桌面,需要依赖VNC协议: VNC(Virtual Network Computing),为一种使用RFB协议的屏幕画面分享及远程操作软件.此软件借由网络,可发送键盘与鼠标的动作及即时的屏幕画面. 相关的参考比较少,去谷歌搜索出来的文章大多都是如何使用客户端进行VNC的搭建与访问,很少有将其内嵌到web里的,腾讯云有相关的功能,但因为业务安全性,咱也看不着人家咋实现的. 再见,百度.用百度查了一次之后,我才知道原来VNC是口红

  • vue封装TabBar组件的完整步骤记录

    目录 实现思路: 步骤一:TabBar和TabBarItem的组件封装 步骤二:给TabBarItem传入active图片 步骤三:TabBarItem和路由的结合效果 步骤四:TabBarItem的颜色控制 用字体图标实现 引入字体图标 运用 总结 实现思路: 步骤一:TabBar和TabBarItem的组件封装 做到这,可以发现页面的基本布局已经实现了,但是item的点击活跃状态还没实现 步骤二:给TabBarItem传入active图片 为了防止替换的内容直接整个替换掉插槽,从而插槽上定义

  • vue3封装Notification组件的完整步骤记录

    目录 创建 插入 移除 在App.vue中使用 总结 跳过新手教程的小白,很多东西都不明白,不过是为了满足一下虚荣心,写代码的成就感 弹窗组件的思路基本一致:向body插入一段HTML.我将从创建.插入.移除这三个方面来说我的做法 先来创建文件吧 |-- packages |-- notification |-- index.js # 组件的入口 |-- src |-- Notification.vue # 模板 |-- notification.ts 创建 用到h,render,h是vue3对

  • Vue项目打包并发布的完整步骤记录

    目录 1.安装部署Nginx服务器.(类似Tomcat服务器) 2.Vue项目打包. 总结 如何将Vue项目打包并发布?我这边是测试发布到本地,不过步骤是一样的,步骤如下: 1.安装部署Nginx服务器.(类似Tomcat服务器) 说明:Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.同时,也是一种轻量级的Web服务器,可以作为独立的服务器部署网站. (1)官方下载网址:http://nginx.org/ (2)下载之后,得到

  • 本地HTTPS环境搭建的完整步骤记录

    前言 之前在为公司的应用添加 https 时,是在 nginx 上配置的,这样不需要 node 做额外的开发,但是组内的开发同学本地一直没有配置,一直是采用 http 的方式开发和测试.最近发现有些 case 需要 https 来复现,比如 Android 5.0 以上的 app 内,使用 https 的网站访问 http 的内容会阻止访问,这种问题测试的时候本地就需要一个 https 的环境.于是花了点时间学习了下本地 https 的搭建,在这里记录一下.下面话不多说了,来一起看看详细的介绍吧

  • Vue插件从封装到发布的完整步骤记录

    插件的分类 添加全局的方法或者属性 比如:vue-element 添加全局的资源 比如:指令 v-bind 通过mixin方法添加的一些混合 添加Vue实例方法 Vue.prototype上面 插件的使用 通过全局方法 Vue.use() 使用插件.它需要在你调用 new Vue() 启动应用之前完成: // 调用 `MyPlugin.install(Vue)` Vue.use(MyPlugin) new Vue({ //... options })``` 也可以传入一个选项对象: ``` ja

  • 在Vue中使用Echarts可视化库的完整步骤记录

    前言 由于最近项目需要做可视化数据展示,也就是用图表展示数据,他还有一个很高端的名字:"大数据可视化"(参考图一),首先考虑选择什么图表库来作为基础开发,目前被普遍认可的是Hcharts.Echarts.AntV. 介绍: Hcharts:国外的一款图表库,是图表库的领头羊 Echarts:百度开发的数据可视化库,国内图表库的 "领军人物" AntV:是蚂蚁金服开发的数据可视化库 总结出以下几个优略点区别Echarts.Hcharts哪个比较合适: 1.学习容易程度

随机推荐