用HTML5+JavaScript实现汉字转拼音工具-CSDN博客

本文链接：https://blog.csdn.net/cnds123/article/details/148092017

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