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