用HTML5+JavaScript实现汉字转拼音工具
用HTML5+JavaScript实现汉字转拼音工具
前一篇博文（https://blog.csdn.net/cnds123/article/details/148067680）提到，当需要将拼音添加到汉字上面时，用python实现比HTML5+JavaScript实现繁琐。在这篇博文中用HTML5+JavaScript实现汉字转拼音工具。
主要功能特点：
1. 多种拼音风格选择（带声调符号、数字声调、无声调）
2. 输出模式：可以选择“普通模式”（仅拼音）或“拼音注音”（每个汉字的拼音显示在上方）
3. 可自定义分隔符，可以自定义拼音之间的分隔符（默认空格）
4. 标点符号保留选项，关闭时会自动过滤非汉字字符
5. 一键复制结果到剪贴板
使用pinyin-pro库，有关情况见
https://pinyin-pro.cn/guide/start.html
这个实现依赖于pinyin-pro库（通过CDN加载），需要网络连接。如果需要离线使用，可以下载pinyin-pro库到本地。修改其中的<script src="https://unpkg.com/pinyin-pro@3.18.2/dist/index.js"></script> 这一句的路径。
运行界面如下：
源码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>汉字转拼音工具</title><style>:root {--primary-color: #4CAF50;--secondary-color: #45a049;--background-color: #f8f9fa;--border-color: #ddd;}body {font-family: 'Microsoft YaHei', Arial, sans-serif;line-height: 1.6;margin: 0;padding: 20px;background-color: var(--background-color);}.container {max-width: 800px;margin: 0 auto;background-color: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}h1 {color: var(--primary-color);text-align: center;margin-bottom: 20px;}.control-panel {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 10px;margin-bottom: 20px;padding: 15px;background-color: var(--background-color);border-radius: 4px;}.control-group {margin-bottom: 10px;}label {display: block;margin-bottom: 5px;font-weight: bold;}select, input[type="text"] {width: 100%;padding: 8px;border: 1px solid var(--border-color);border-radius: 4px;box-sizing: border-box;}.checkbox-group {margin-top: 10px;}.checkbox-group label {font-weight: normal;display: flex;align-items: center;gap: 5px;}.text-area {width: 100%;height: 150px;padding: 10px;margin-bottom: 10px;border: 1px solid var(--border-color);border-radius: 4px;resize: vertical;box-sizing: border-box;}.button-group {display: flex;gap: 10px;margin-bottom: 20px;flex-wrap: wrap;}button {padding: 10px 20px;background-color: var(--primary-color);color: white;border: none;border-radius: 4px;cursor: pointer;transition: background-color 0.3s;}button:hover {background-color: var(--secondary-color);}.result-container {margin-top: 20px;padding: 15px;background-color: var(--background-color);border-radius: 4px;}.result-text {line-height: 2;margin: 0;}ruby {margin: 0 2px;}rt {color: #0066cc;font-size: 0.7em;font-weight: normal;}.error {color: red;margin-top: 10px;}@media (max-width: 600px) {.container {padding: 10px;}.button-group {flex-direction: column;}button {width: 100%;}}</style>
</head>
<body><div class="container"><h1>汉字转拼音工具</h1><div class="control-panel"><div class="control-group"><label for="pinyinStyle">拼音风格：</label><select id="pinyinStyle"><option value="tone">带声调</option><option value="tone2">数字声调</option><option value="normal">无声调</option></select></div><div class="control-group"><label for="outputMode">输出模式：</label><select id="outputMode"><option value="normal">普通模式</option><option value="ruby">拼音注音</option></select></div><div class="control-group"><label for="separator">分隔符：</label><input type="text" id="separator" value=" " maxlength="1"></div><div class="checkbox-group"><label><input type="checkbox" id="keepPunctuation" checked>保留标点</label></div></div><textarea id="inputText" class="text-area" placeholder="请输入要转换的汉字..."></textarea><div class="button-group"><button onclick="convertText()">转换</button><button onclick="clearText()">清空</button><button onclick="copyResult()">复制结果</button></div><div class="result-container"><div id="result" class="result-text"></div></div></div><script src="https://unpkg.com/pinyin-pro@3.18.2/dist/index.js"></script><script>// 声调映射表const toneMap = {'a': ['ā', 'á', 'ǎ', 'à', 'a'],'e': ['ē', 'é', 'ě', 'è', 'e'],'i': ['ī', 'í', 'ǐ', 'ì', 'i'],'o': ['ō', 'ó', 'ǒ', 'ò', 'o'],'u': ['ū', 'ú', 'ǔ', 'ù', 'u'],'ü': ['ǖ', 'ǘ', 'ǚ', 'ǜ', 'ü'],'v': ['ǖ', 'ǘ', 'ǚ', 'ǜ', 'ü']};// 转换函数function convertText() {const inputText = document.getElementById('inputText').value.trim();if (!inputText) return;const style = document.getElementById('pinyinStyle').value;const mode = document.getElementById('outputMode').value;const separator = document.getElementById('separator').value;const keepPunctuation = document.getElementById('keepPunctuation').checked;try {const result = mode === 'ruby' ? convertToRuby(inputText, style) : convertToPlain(inputText, style, separator);document.getElementById('result').innerHTML = result;} catch (error) {document.getElementById('result').innerHTML = `<div class="error">转换失败：${error.message}</div>`;}}// 转换为普通拼音文本function convertToPlain(text, style, separator) {const options = {toneType: style,nonZh: keepPunctuation ? 'retain' : 'removed',separator: separator};return pinyinPro.pinyin(text, options);}// 转换为Ruby注音格式function convertToRuby(text, style) {let result = '';const chars = Array.from(text);for (const char of chars) {if (/[\u4e00-\u9fff]/.test(char)) {// 汉字const pinyin = pinyinPro.pinyin(char, {toneType: style,nonZh: 'removed'});result += `<ruby>${char}<rt>${pinyin}</rt></ruby>`;} else {// 非汉字result += keepPunctuation ? char : '';}}return result;}// 清空文本function clearText() {document.getElementById('inputText').value = '';document.getElementById('result').innerHTML = '';}// 复制结果function copyResult() {const resultElement = document.getElementById('result');const text = result.textContent || result.innerText;if (!text) {alert('没有可复制的内容！');return;}// 创建选区const selection = window.getSelection();const range = document.createRange();range.selectNodeContents(resultElement);selection.removeAllRanges();selection.addRange(range);try {// 尝试执行复制命令const successful = document.execCommand('copy');if (successful) {alert('已复制到剪贴板');} else {alert('复制失败，请手动选择并按Ctrl+C复制');}} catch (err) {alert('无法复制: ' + err);}// 清除选区selection.removeAllRanges();}// 初始化document.addEventListener('DOMContentLoaded', () => {// 可以添加初始化代码});</script>
</body>
</html>
相关文章：
用HTML5+JavaScript实现汉字转拼音工具
用HTML5JavaScript实现汉字转拼音工具 前一篇博文（https://blog.csdn.net/cnds123/article/details/148067680）提到，当需要将拼音添加到汉字上面时，用python实现比HTML5JavaScript实现繁琐。在这篇博文中用HTML5JavaScript实现汉…...
基于Java，SpringBoot，Vue，UniAPP医院预约挂号买药就诊病例微信小程序系统设计
摘要 随着医疗信息化的不断推进以及“互联网医疗”模式的广泛普及，传统医院挂号流程中存在的排队时间长、资源分配不均等问题日益凸显，急需通过数字化手段加以解决。本研究设计并实现了一套基于Java、SpringBoot、Vue与UniAPP技术栈的医院预约挂号微信小…...
ONNX模型的动态和静态量化
引言 通常我们将模型转换为onnx格式之后，模型的体积可能比较大，这样在某些场景下就无法适用。最近想在移动端部署语音识别、合成模型，但是目前的效果较好的模型动辄几个G，于是便想着将模型压缩一下。本文探索了两种压缩方法&…...
PHP 垃圾回收高级特性
PHP 垃圾回收高级特性 1. 循环引用与内存泄漏 单纯的引用计数在遇到循环引用时会导致内存泄漏，主要原因是引用计数无法正确识别那些仅通过循环引用相互关联但实际上已经不可达的对象。 1.1 引用计数的基本原理 引用计数是一种内存管理机制，通过维护每…...
OpenFeign vs MQ：微服务通信如何选型？详解同步与异步的适用场景
OpenFeign vs MQ：微服务通信如何选型？详解同步与异步的适用场景 引言 在微服务架构中，服务之间的通信方式直接影响系统的性能、可靠性和可维护性。常见的通信方式有 OpenFeign（同步HTTP调用） 和 MQ（消息队…...
如何用命令行将 PDF 表格转换为 HTML 表格
本文将介绍如何使用命令行将可填写的 PDF 表单转换为 HTML 表单。只需几行代码即可完成转换。将可填写的 PDF 表单转换为 HTML 表单后，你可以在网页上显示这些表单。本指南使用 FormVu 来演示转换过程。 使用命令行将可填写 PDF 表单转换为 HTML 表单 你可以通过命…...
html5的响应式布局的方法示例详解
以下是HTML5实现响应式布局的5种核心方法及代码示例： 1. 媒体查询（核心方案） /* 默认样式（移动优先） */ .container {padding: 15px; }/* 中等屏幕（平板） */ @media (min-width: 768px) {.container {padding: 30px;max-width: 720px;} }/* 大屏幕（桌面） */ @media …...
如何用Python抓取Google Scholar
文章目录 [TOC](文章目录) 前言一、为什么要抓取Google Scholar？二、Google Scholar 抓取需要什么三、为什么代理对于稳定的抓取是必要的四、一步一步谷歌学者抓取教程4.1. 分页和循环4.2. 运行脚本 五、完整的Google Scholar抓取代码六、抓取Google Scholar的高级提…...
电脑革命家测试版：硬件检测，6MB 轻量无广告 清理垃圾 + 禁用系统更新
各位电脑小白和大神们，我跟你们说啊！有个超牛的东西叫电脑革命家测试版，这是吾爱破解论坛的开发者搞出来的免费无广告系统工具集合，主打硬件检测和系统优化，就像是鲁大师这些软件的平替。下面我给你们唠唠它的核心功能…...
Wireshark对usb设备进行抓包找不到USBPcap接口的解决方案
引言 近日工作需要针对usb设备进行抓包，但按照wireshark安装程序流程一步步走，即使勾选了安装USBPcap安装完成后开启wireshark依然不显示USBPcap接口，随设法进行解决。 最终能够正常显示USBPcap接口并能够正常使用进行抓包 解决方案&#x…...
题目 3298: 蓝桥杯2024年第十五届决赛真题-兔子集结
题目 3298: 蓝桥杯2024年第十五届决赛真题-兔子集结 时间限制: 2s 内存限制: 192MB 提交: 2499 解决: 309 题目描述 在森林幽静的一隅，有一村落居住着 n 只兔子。 某个月光皎洁的夜晚，这些兔子列成一队，准备开始一场集结跳跃活动。村落中…...
Unity开发之Webgl自动更新程序包
之前让客户端更新webgl程序是在程序里写版本号然后和服务器对比，不同就调用 window.location.reload(true);之前做的客户端都是给企业用，用户数少看不出来啥问题。后来自己开发一个小网站，用户数量还是挺多，然后就会遇到各种各样的…...
深入理解设计模式之状态模式
深入理解设计模式之：状态模式（State Pattern） 一、什么是状态模式？ 状态模式（State Pattern）是一种行为型设计模式。它允许一个对象在其内部状态发生改变时，改变其行为（即表现出不…...
Socket 编程 UDP
目录 1. UDP网络编程 1.1 echo server 1.1.1 接口 1.1.1.1 创建套接字 1.1.1.2 绑定 1.1.1.3 bzero 1.1.1.4 htons（主机序列转网络序列） 1.1.1.5 inet_addr（主机序列IP转网络序列IP） 1.1.1.6 recvfrom（让服务…...
Jenkins实践(8)：服务器A通过SSH调用服务器B执行Python自动化脚本
Jenkins实践(8)：服务器A通过SSH调用服务器B执行Python自动化脚本 1、需求： 1、Jenkins服务器在74上，Python脚本在196服务器上 2、需要在服务器74的Jenkins上调用196上的脚本执行Python自动化测试 2、操作步骤 第一步：Linux Centos7配置SSH免密登录 Linux Centos7配置S…...
Spring AI系列之Spring AI 集成 ChromaDB 向量数据库
1. 概述 在传统数据库中，我们通常依赖精确的关键词或基本的模式匹配来实现搜索功能。虽然这种方法对于简单的应用程序已经足够，但它无法真正理解自然语言查询背后的含义和上下文。 向量存储解决了这一限制，它通过将数据以数值向量的形式存储…...
lua的注意事项2
总之，下面的返回值不是10，a，b 而且...
主流电商平台的反爬机制解析
随着数据成为商业决策的重要资源，越来越多企业和开发者希望通过技术手段获取电商平台的公开信息，用于竞品分析、价格监控、市场调研等。然而，主流电商平台如京东、淘宝（含天猫）等为了保护数据安全和用户体验࿰…...
前端八股之HTML
前端秘籍-HTML篇 1. src和href的区别 src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。 （1）src src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置࿱…...
tiktoken学习
1.tiktoken是OpenAI编写的进行高效分词操作的库文件。 2.操作过程： enc tiktoken.get_encoding("gpt2") train_ids enc.encode_ordinary(train_data) val_ids enc.encode_ordinary(val_data) 以这段代码为例，get_encoding是创建了一个En…...
鲲鹏Arm+麒麟V10，国产化信创 K8s 离线部署保姆级教程
Rainbond V6 国产化部署教程，针对鲲鹏 CPU 麒麟 V10 的离线环境，手把手教你从环境准备到应用上线，所有依赖包提前打包好，步骤写成傻瓜式操作指南。别说技术团队了，照着文档一步步来，让你领导来都能独立完成…...
历年厦门大学计算机保研上机真题
2025厦门大学计算机保研上机真题 2024厦门大学计算机保研上机真题 2023厦门大学计算机保研上机真题 在线测评链接：https://pgcode.cn/school 数字变换过程的最大值与步数 题目描述 输入一个数字 n n n，如果 n n n 是偶数就将该偶数除以 2 2 2&…...
【C++ Qt】认识Qt、Qt 项目搭建流程（图文并茂、通俗易懂）
每日激励：“不设限和自我肯定的心态：I can do all things。 — Stephen Curry” 绪论： 本章将开启Qt的学习，Qt是一个较为古老但仍然在GUI图形化界面设计中有着举足轻重的地位，因为它适合嵌入式和多种平台而被广泛使用…...
IoT/HCIP实验-1/物联网开发平台实验Part2（HCIP-IoT实验手册版）
文章目录 概述产品和设备实例的产品和设备产品和设备的关联单个产品有多个设备为产品创建多个设备产品模型和物模型设备影子（远程代理） 新建产品模型定义编解码插件开发编解码插件工作原理消息类型与二进制码流添加消息（数据上报消息…...
Replacing iptables with eBPF in Kubernetes with Cilium
source: https://archive.fosdem.org/2020/schedule/event/replacing_iptables_with_ebpf/attachments/slides/3622/export/events/attachments/replacing_iptables_with_ebpf/slides/3622/Cilium_FOSDEM_2020.pdf 使用Cilium，结合eBPF、Envoy、Istio和Hubble等技术…...
推荐系统排序指标：MRR、MAP和NDCG
文章目录 MRR: Mean Reciprocal RankMAP: Mean Average PrecisionNDCG: Normalized Discounted Cumulative Gain3个度量标准来自于两个度量家族。第一种度量包括基于二进制相关性的度量。这些度量标准关心的是一个物品在二进制意义上是否是好的。第二个系列包含基于应用的度量。…...
数学建模之最短路径问题
1 问题的提出 这个是我们的所要写的题目，我们要用LINGO编程进行编写这个题目，那么就是需要进行思考这个怎么进行构建这个问题的模型 首先起点，中间点，终点我们要对这个进行设计 2 三个点的设计 起点的设计 起点就是我们进去&am…...
测试概念 和 bug
一 敏捷模型 在面对在开发项目时会遇到客户变更需求以及合并新的需求带来的高成本和时间 出现的敏捷模型 敏捷宣言 个人与交互重于过程与工具 强调有效的沟通 可用的软件重于完备的文档 强调轻文档重产出 客户协作重于合同谈判 主动及时了解当下的要求 相应变化…...
zynq 级联多个ssd方案设计(ECAM BUG修改)
本文讲解采用zynq7045芯片如何实现200T容量高速存储方案设计，对于大容量高速存储卡，首先会想到采用pcie switch级联方式，因为单张ssd的容量是有限制的（目前常见的m.2接口容量为4TB，U.2接口容量为16TB）&…...
brep2seq 论文笔记
Brep2Seq: a dataset and hierarchical deep learning network for reconstruction and generation of computer-aided design models | Journal of Computational Design and Engineering | Oxford Academic 这段文本描述了一个多头自注意力机制（MultiHead Attenti…...