用HTML5+JavaScript实现汉字转拼音工具

news2025/6/2 9:27:21

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2393504.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于Java,SpringBoot,Vue,UniAPP医院预约挂号买药就诊病例微信小程序系统设计

摘要 随着医疗信息化的不断推进以及“互联网医疗”模式的广泛普及&#xff0c;传统医院挂号流程中存在的排队时间长、资源分配不均等问题日益凸显&#xff0c;急需通过数字化手段加以解决。本研究设计并实现了一套基于Java、SpringBoot、Vue与UniAPP技术栈的医院预约挂号微信小…

ONNX模型的动态和静态量化

引言  通常我们将模型转换为onnx格式之后&#xff0c;模型的体积可能比较大&#xff0c;这样在某些场景下就无法适用。最近想在移动端部署语音识别、合成模型&#xff0c;但是目前的效果较好的模型动辄几个G&#xff0c;于是便想着将模型压缩一下。本文探索了两种压缩方法&…

如何用Python抓取Google Scholar

文章目录 [TOC](文章目录) 前言一、为什么要抓取Google Scholar&#xff1f;二、Google Scholar 抓取需要什么三、为什么代理对于稳定的抓取是必要的四、一步一步谷歌学者抓取教程4.1. 分页和循环4.2. 运行脚本 五、完整的Google Scholar抓取代码六、抓取Google Scholar的高级提…

Wireshark对usb设备进行抓包找不到USBPcap接口的解决方案

引言 近日工作需要针对usb设备进行抓包&#xff0c;但按照wireshark安装程序流程一步步走&#xff0c;即使勾选了安装USBPcap安装完成后开启wireshark依然不显示USBPcap接口&#xff0c;随设法进行解决。 最终能够正常显示USBPcap接口并能够正常使用进行抓包 解决方案&#x…

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&#xff08;主机序列转网络序列&#xff09; 1.1.1.5 inet_addr&#xff08;主机序列IP转网络序列IP&#xff09; 1.1.1.6 recvfrom&#xff08;让服务…

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…

lua的注意事项2

总之&#xff0c;下面的返回值不是10&#xff0c;a&#xff0c;b 而且

前端八股之HTML

前端秘籍-HTML篇 1. src和href的区别 src 用于替换当前元素&#xff0c;href 用于在当前文档和引用资源之间确立联系。 &#xff08;1&#xff09;src src 是 source 的缩写&#xff0c;指向外部资源的位置&#xff0c;指向的内容将会嵌入到文档中当前标签所在位置&#xff1…

鲲鹏Arm+麒麟V10,国产化信创 K8s 离线部署保姆级教程

Rainbond V6 国产化部署教程&#xff0c;针对鲲鹏 CPU 麒麟 V10 的离线环境&#xff0c;手把手教你从环境准备到应用上线&#xff0c;所有依赖包提前打包好&#xff0c;步骤写成傻瓜式操作指南。别说技术团队了&#xff0c;照着文档一步步来&#xff0c;让你领导来都能独立完成…

【C++ Qt】认识Qt、Qt 项目搭建流程(图文并茂、通俗易懂)

每日激励&#xff1a;“不设限和自我肯定的心态&#xff1a;I can do all things。 — Stephen Curry” 绪论​&#xff1a; 本章将开启Qt的学习&#xff0c;Qt是一个较为古老但仍然在GUI图形化界面设计中有着举足轻重的地位&#xff0c;因为它适合嵌入式和多种平台而被广泛使用…

IoT/HCIP实验-1/物联网开发平台实验Part2(HCIP-IoT实验手册版)

文章目录 概述产品和设备实例的产品和设备产品和设备的关联单个产品有多个设备为产品创建多个设备产品模型和物模型设备影子&#xff08;远程代理&#xff09; 新建产品模型定义编解码插件开发编解码插件工作原理消息类型与二进制码流添加消息&#xff08;数据上报消息&#xf…

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&#xff0c;结合eBPF、Envoy、Istio和Hubble等技术…

数学建模之最短路径问题

1 问题的提出 这个是我们的所要写的题目&#xff0c;我们要用LINGO编程进行编写这个题目&#xff0c;那么就是需要进行思考这个怎么进行构建这个问题的模型 首先起点&#xff0c;中间点&#xff0c;终点我们要对这个进行设计 2 三个点的设计 起点的设计 起点就是我们进去&am…

测试概念 和 bug

一 敏捷模型 在面对在开发项目时会遇到客户变更需求以及合并新的需求带来的高成本和时间 出现的敏捷模型 敏捷宣言 个人与交互重于过程与工具 强调有效的沟通 可用的软件重于完备的文档 强调轻文档重产出 客户协作重于合同谈判 主动及时了解当下的要求 相应变化…

zynq 级联多个ssd方案设计(ECAM BUG修改)

本文讲解采用zynq7045芯片如何实现200T容量高速存储方案设计&#xff0c;对于大容量高速存储卡&#xff0c;首先会想到采用pcie switch级联方式&#xff0c;因为单张ssd的容量是有限制的&#xff08;目前常见的m.2接口容量为4TB&#xff0c;U.2接口容量为16TB&#xff09;&…

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 这段文本描述了一个多头自注意力机制&#xff08;MultiHead Attenti…

【运维实战】Linux 中设置 sudo ,8个有用的 sudoers 配置!

在Linux及其他类Unix操作系统中&#xff0c;只有 root 用户能够执行所有命令并进行关键系统操作&#xff0c;例如安装更新软件包、删除程序、创建用户与用户组、修改重要系统配置文件等。 但担任 root 角色的系统管理员可通过配置sudo命令&#xff0c;允许普通系统用户执行特定…

江科大SPI串行外设接口hal库实现

hal库相关函数 初始化结构体 typedef struct {uint32_t Mode; /*SPI模式*/uint32_t Direction; /*SPI方向*/uint32_t DataSize; /*数据大小*/uint32_t CLKPolarity; /*时钟默认极性控制CPOL*/uint32_t CLKPhase; /*…

[网页五子棋][对战模块]前后端交互接口(建立连接、连接响应、落子请求/响应),客户端开发(实现棋盘/棋子绘制)

文章目录 约定前后端交互接口建立连接建立连接响应针对"落子"的请求和响应 客户端开发实现棋盘/棋子绘制部分逻辑解释 约定前后端交互接口 对战模块和匹配模块使用的是两套逻辑&#xff0c;使用不同的 websocket 的路径进行处理&#xff0c;做到更好的耦合 建立连接 …

【ArcGIS Pro微课1000例】0071:将无人机照片生成航线、轨迹点、坐标高程、方位角

文章目录 一、照片预览二、生成轨迹点三、照片信息四、查看方位角五、轨迹点连成线一、照片预览 数据位于配套实验数据包中的0071.rar,解压之后如下: 二、生成轨迹点 地理标记照片转点 (数据管理),用于根据存储在地理标记照片文件(.jpg 或 .tif)元数据中的 x、y 和 z 坐…