用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库到本地。修改其中的 这一句的路径。

运行界面如下：

​

源码如下：

    
    
    汉字转拼音工具
    
        :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%;
            }
        }
    


    
        
汉字转拼音工具
        
        
            
                拼音风格：
                
                    带声调
                    数字声调
                    无声调
                
            
            
                输出模式：
                
                    普通模式
                    拼音注音
                
            
            
                分隔符：
                
            
            
                
                    
                    保留标点
                
            
        
        
        
            转换
            清空
            复制结果
        
        
            
        
    
    
    
        // 声调映射表
        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 = 
                    `转换失败：${error.message}`;
            }
        }
        // 转换为普通拼音文本
        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 += `${char}${pinyin}`;
                } 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', () => {
            // 可以添加初始化代码
        });