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

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

输汉字出拼音

马黑黑 · 发表于 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ǎ',
         𡘜: 'kū',
      });

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