实现拼音标注

Published:

前言

在很多儿童类读本的App上，App会对文字进行拼音标注，这是如何实现的？

HTML 标签

HTML 提供了 <ruby> 和 <rt> 这两个语义化标签来给东亚文字注音。

汉 hàn 
<ruby>
  汉
  <rt>hàn</rt>
</ruby>

如果遇到不兼容的浏览器，可以尝试使用 rp 来让它作为行内元素。

<ruby>
  汉
  <rp>(</rp>
  <rt>hàn</rt>
  <rp>)</rp>
</ruby>

如何通过汉字拿到拼音

通过第三方库 pinyin 查询。

const result = pinyin("子弹", {
  segument: true,
  heteronym: true,
}); // ['dàn'] 返回一个数组，存在多音字
// 可能存在英文，那么需要判断是否为中文
const regex = /[\u4e00-\u9fa5]/;

function isChinese(char) {
  return regex.test(char);
}