HTML5 漢字轉化爲拼音，帶讀聲，窮舉多音字

時間 2019-12-08

原文原文鏈接

1，沒別的，像這種沒有規則的轉化，咱們首先須要一個字典文件，字典文件的完整度，決定了轉化的成功率與精確度javascript

2，筆者收集了較爲完整的字典文件，已上傳到博客園，歡迎補充 => https://blog-static.cnblogs.com/files/lovling/pinyin.dict.jscss

這個地址能夠直接用 script 標籤引入，可是博客園常常抽風，是否是的訪問不到，推薦使用時仍是在瀏覽器打開，拷貝到本地在引入使用html

3，藉助字典，編寫程序進行匹配轉化，代碼以下，註釋寫的不是很詳細，不過相信都能看懂java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>漢字轉化爲拼音</title>
    <!--<script src="https://blog-static.cnblogs.com/files/lovling/pinyin.dict.js"></script>-->
    <script src="./pinyin.dict.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
</head>
<style type="text/css">
    #word, #butt {
        width: 360px;
        height: 44px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 14px;
    }
    #text1, #text2, #text3 {
        height: 44px;
    }
</style>
<body>
    <input id="word" type="text" />
    <input id="butt" type="button" value="轉化" />
    <div id="text1"></div>
    <div id="text2"></div>
    <div id="text3"></div>
</body>
<script type="text/javascript">
    /**
     * 封裝漢字轉化爲拼音的方法，該方法具備如下特色
     * 1, 多音字只是識別成多種拼音組合, 不能精準識別
     * 2, 不開啓多音字, 漢字識別返回使用頻率高的拼音
     * @param {String} str: 漢字字符串
     * @param {Boolean} isTone: 是否進行聲調識別 默認 false
     * @param {Boolean} isMultitone: 是否窮舉多音字 默認 false
     * @return: 若是開啓多音字識別, 返回的是數組, 不然返回字符串
     */
    var chineseCharToPinyin = (function () {
        // 注意這裏的變量 pinyinDict 來自於字典文件，須要先引入字典文件，且該變量不要在程序中被覆蓋
        var temp = pinyinDict.split(','), withtone = {};
        // 循環遍歷字典，以漢字字符爲 key，對應的拼音爲 value，造成一個超大的 JSON 對象
        for(var i = 0; i < temp.length; i++) {
            withtone[String.fromCharCode(i + 19968)] = temp[i];
        }
        var toneMap = {
            "ā": "a1", "á": "a2", "ǎ": "a3", "à": "a4", "ō": "o1", "ó": "o2", "ǒ": "o3",
            "ò": "o4", "ē": "e1", "é": "e2", "ě": "e3", "è": "e4", "ī": "i1", "í": "i2",
            "ǐ": "i3", "ì": "i4", "ū": "u1", "ú": "u2", "ǔ": "u3", "ù": "u4", "ü": "v0",
            "ǖ": "v1", "ǘ": "v2", "ǚ": "v3", "ǜ": "v4", "ń": "n2", "ň": "n3", "": "m2"
        };
        // 未開啓聲調識別的時候，將帶聲調的字符切換成不帶聲調的字母
        var removeTone = function(pinyin) {
            return pinyin.replace(/[āáǎàōóǒòēéěèīíǐìūúǔùüǖǘǚǜńň]/g, function(m) {
                return toneMap[m][0];
            });
        };
        // 過濾掉多音字窮舉產生的相同結果
        var simpleUnique = function(array) {
            var result = [], hash = {};
            for(var i = 0; i < array.length; i++) {
                var key = (typeof array[i]) + array[i];
                if(!hash[key]) {
                    result.push(array[i]);
                    hash[key] = true;
                }
            }
            return result;
        };
        // 多音字窮舉
        var handlePolyphone = function(array, joinChar) {
            var result = [''], temp = [];
            for(var i = 0; i < array.length; i++) {
                temp = [];
                var t = array[i].split(' ');
                for(var j = 0; j < t.length; j++) {
                    for(var k = 0; k < result.length; k++)
                        temp.push(result[k] + (result[k] ? joinChar : '') + t[j]);
                }
                result = temp;
            }
            return simpleUnique(result);
        };
        // 對外返回一個轉化的方法
        return function (str, isTone = false, isMultitone = false) {
            var result = [], pinyin;
            for(var i = 0; i < str.length; i++) {
                pinyin = withtone[str[i]];
                if(!isTone && pinyin) pinyin = removeTone(pinyin);
                if(!isMultitone && pinyin) pinyin = pinyin.replace(/ .*$/g, '');
                result.push(pinyin || str[i]);
            }
            if(!isMultitone) return result.join(" ");
            return handlePolyphone(result, " ");
        }
    })();


    /**
     * 寫一個輸入框測試一下
     */
    $('#butt').on("click", function (ev) {
        var str = $("#word").val().trim();

        // 最簡單的使用
        $("#text1").text(chineseCharToPinyin(str));

        // 帶讀聲識別的使用
        $("#text2").text(chineseCharToPinyin(str, true));

        // 窮舉多音字的使用
        $("#text3").text(chineseCharToPinyin(str, true, true))

    });
</script>
</html>