当前位置：首页 > news >正文

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

news 来源：原创 2025/5/24 10:50:34

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