论坛 › 马黑黑教程专版 › 输汉字出拼音 ：pinyin-pro 使用示范

马黑黑 发表于 2025-12-31 20:54

输汉字出拼音 ：pinyin-pro 使用示范

<style>
        .mncontain { margin: 20px auto; max-width: 800px; font: normal 18px/1.5 sans-serif; position: relative; }
        .mncontain div { margin: 10px 0; }
        .textbox { width: 100%; height: 200px; padding: 16px; font-size: 1em; box-sizing: border-box; }
        .pybox { width: 100$; min-height: 200px; }
        .btnbox { text-align: right; }
        .py-chinese-item { font-size: 1.5em; }
        .py-pinyin-item { font-size: 0.8em; padding: 2px 0; color: #333;}
        .txt-mid { text-align: center; }
        #btnRanChar, #btnDone { width: 100px; margin-left: 16px; }
</style>

<h1 class="txt-mid">输汉字出拼音</h1>
<div class="mncontain">
        <textarea class="textbox" placeholder="请输入汉字"></textarea>
        <div class="btnbox">
                <button type="button" id="btnRanChar">随机汉字</button>
                <button type="button" id="btnDone">中</button>
        </div>
        <div class="pybox"></div>
</div>

<script type="module">
        import { html } from 'https://638183.freep.cn/638183/web/py/pypro.js';
       
        const getText = text => text.trim().replaceAll('\n', '<br>');
       
        const outputPy = (target, text) => {
                if (!text) return;
                target.innerHTML = html(text);
        };
       
        const getRanZh = (num) => {
                const start = 0x4e00;
                const end = 0x9fff;
                let result = '';
                for (let i = 0; i < num; i++) {
                        const code = Math.floor(Math.random() * (end - start + 1)) + start;
                        result += String.fromCharCode(code);
                }
                return result;
        }
       
        const outbox = document.querySelector('.pybox');
        const textarea = document.querySelector('textarea');
        const btnDone = document.querySelector('#btnDone');
        const btnRanChar = document.querySelector('#btnRanChar');

        btnDone.onclick = () => outbox.innerHTML = html(getText(textarea.value));
        btnRanChar.onclick = () => textarea.value = getRanZh(100);
</script>

马黑黑 发表于 2025-12-31 20:56

一楼代码：

<style>
        .mncontain { margin: 20px auto; max-width: 800px; font: normal 18px/1.5 sans-serif; position: relative; }
        .textbox { width: 100%; height: 200px; padding: 16px; font-size: 1em; box-sizing: border-box; }
        .pybox { width: 100$; min-height: 200px; }
        .btnbox { margin: 10px 0; text-align: right; }
        .py-chinese-item { font-size: 1.5em; }
        .py-pinyin-item { font-size: 0.8em; padding: 2px 0; color: #333;}
        .txt-mid { text-align: center; }
        #btnDone { width: 100px; }
</style>

<h1 class="txt-mid">输汉字出拼音</h1>
<div class="mncontain">
        <textarea class="textbox" placeholder="请输入汉字"></textarea>
        <div class="btnbox">
                <button id="btnDone">中</button>
        </div>
        <div class="pybox"></div>
</div>

<script type="module">
        import { html } from 'https://638183.freep.cn/638183/web/py/pypro.js';
       
        const getText = text => text.trim().replaceAll('\n', '<br>');
       
        const outputPy = (target, text) => {
                if (!text) return;
                target.innerHTML = html(text);
        };
       
        const outbox = document.querySelector('.pybox');
        const textarea = document.querySelector('textarea');
        const btn = document.querySelector('#btnDone');

        btn.onclick = () => outbox.innerHTML = html(getText(textarea.value));
</script>

马黑黑 发表于 2025-12-31 21:12

pinyin-prog.js 库应用核心：

这个库楼主做了一些改装，这样可以通过 ES6 导入资源模块，方便 Discuz！论坛使用。所以，应在 script 标签中使用 type="module" 属性，且标签内 所有变量都得事先声明。然后——

一、导入资源，使用我导出的函数，有 py、selfPy、html 等函数，需要什么导出什么（参考22行代码）；

二、使用 html() 函数输出拼音+文本（参考35行代码），格式如下：

      const result = html('你好玛丽！');

resutl 变量就是输出的拼音+文本的内容，文本可自定义，放在函数的参数里，可以使用变量替代直接文本。文本支持换行符<p>、 <br> 等。

三、如果需要自定义拼音以精准输出，需要导入另外一个函数 selfPy()，22行代码改为：

      import { html, selfPy } from '...';

然后，在使用 html() 函数之前插入如下代码：

      selfPy({
            王茜: 'wáng qiàn',
            饮马: 'yì mǎ',
            &#136732;: 'kū',
      });

这样，待处理的文字里头，出现上述自定义的文字，会按照自定义的给出拼音。顺便说一下，上面自定义的拼音里面，第三个项目 pinyin-pro 拿不出答案，自定义之后就可以了。

马黑黑 发表于 2025-12-31 21:13

<p>&#136732;</p>

马黑黑 发表于 2025-12-31 21:14

论坛编码是 charset=gbk，已经够厉害了，但是那个 口口大 的字还是不能正常显示它是 Unicode 扩展区里的字

马黑黑 发表于 2025-12-31 21:16

任何常规输入法输入的字，pinyin-pro 都能给出拼音，准确率高达 90% 以上

花飞飞 发表于 2025-12-31 21:38

https://s3.bmp.ovh/imgs/2026/01/01/1faa707b7d9edbb9.png

花飞飞 发表于 2025-12-31 21:39

想过很快就能看到这么方便的，没想到有这么快。。你写个程序跟抽支烟一样顺手啊。。{:4_170:}

花飞飞 发表于 2025-12-31 21:41

马黑黑 发表于 2025-12-31 21:13
&#136732;

这是五楼说的口口大？我想到了哭还多一点{:4_173:}

小辣椒 发表于 2025-12-31 21:43

这个可以给小朋友搜索正确的拼音{:4_173:}

花飞飞 发表于 2025-12-31 21:43

又yòu 双shuāng 叒ruò 叕zhuó
这四个字好打不好读，用这个最方便了。。{:4_173:}

马黑黑 发表于 2025-12-31 23:08

花飞飞 发表于 2025-12-31 21:39
想过很快就能看到这么方便的，没想到有这么快。。你写个程序跟抽支烟一样顺手啊。。

有库可用，编程并不多，改库有点棘手

马黑黑 发表于 2025-12-31 23:08

花飞飞 发表于 2025-12-31 21:43
又yòu 双shuāng 叒ruò 叕zhuó
这四个字好打不好读，用这个最方便了。。

{:4_173:}

马黑黑 发表于 2025-12-31 23:08

小辣椒 发表于 2025-12-31 21:43
这个可以给小朋友搜索正确的拼音

{:4_181:}

花飞飞 发表于 2026-1-1 08:54

马黑黑 发表于 2025-12-31 23:08
有库可用，编程并不多，改库有点棘手

刚看到站里发了个增强版，可以随意调用汉字。。
看着像是个繁体库也{:4_173:}

花飞飞 发表于 2026-1-1 08:54

马黑黑 发表于 2025-12-31 23:08


我记过这四个字的读音，后面的记一次忘一次。。没办法。{:4_173:}

马黑黑 发表于 2026-1-1 09:33

花飞飞 发表于 2026-1-1 08:54
我记过这四个字的读音，后面的记一次忘一次。。没办法。

没用的上一般都记不住，人脑它有一个自然的抵制机制，不愿意塞进没用的东东，这是长期进化出来的一种策略，旨在不浪费有限的资源

马黑黑 发表于 2026-1-1 09:35

花飞飞 发表于 2026-1-1 08:54
刚看到站里发了个增强版，可以随意调用汉字。。
看着像是个繁体库也

不是繁体字库，是 Unicode 收录的汉字。随机上屏的汉字中，pinyin-pro 不一定都能提供拼音注音

红影 发表于 2026-1-1 13:01

这个好，可以自动标注拼音呢，太赞了{:4_187:}

红影 发表于 2026-1-1 13:02

原来口口大是这个https://s3.bmp.ovh/imgs/2026/01/01/36261aa0d53e026c.png
还是头一次见到这个字呢{:4_173:}

查看完整版本: 输汉字出拼音 ：pinyin-pro 使用示范