International front-end website translation (multilingual) Solutions

Front-end international translation

Tags: International Support

---

Join your website:

<script>
    var langPackage = {
        "主题": "Title",
        "下一页": "NextPage",
        "末页": "LastPage",
        "首页": " FirstPage ",
        "上一页": " PreviousPage ",
        "待办工作": "MyTasks",
        "中": "Middle",
        "每页": " EachPage ",
        "条": " Record ",
        "共": " Total ",
        "页": " Page ",
        "第": " Current ",
        "工作主题": " ProcTitle"
    };
    /* 
            主调函数
            在 Jquery的 .read方法里调用 ReplaceChildChs($(document));
            或者页面的最后调用
            ReplaceChildChs($(document));
        */
    function ReplaceChildChs(nodeObj) {
        // if($("#hdfUseLang").val()=="CN")return;
        if (nodeObj.children().length > 0) {
            nodeObj.children().each(function() {
                ReplaceChildChs($(this));
                //            if ($(this)[0].nodeName.toUpperCase() == "TD"){
                FindChsAndReplaceIt($(this));
                //            }
            });
        } else {
            FindChsAndReplaceIt(nodeObj);
        }
    }

    // 直接替换html 的一种设想，但总是报错
    function JustReplaceChsDom(nodeObj) {
        var pat = new RegExp("[\u4e00-\u9fa5]+", "g"); // 匹配中文的正则表达式
        var str = $(nodeObj).html();
        while ((arr = pat.exec(str)) != null) {
            if (langPackage[arr[0]]) {
                str = str.replace(arr[0], langPackage[arr[0]]);
            }
        }
        $(nodeObj).html(str);
    }

    function FindChsAndReplaceIt(nodeObj) {
        var pat = new RegExp("[\u4e00-\u9fa5]+", "g");
        if ((nodeObj.text() || nodeObj.val() || nodeObj.attr("title")) &&
            (pat.exec(nodeObj.text()) || pat.exec(nodeObj.val()) || pat.exec(nodeObj.attr("title")))) {
            var str = ""
            if (nodeObj.text()) {
                str = nodeObj.text();
                ReplaceValue(str, nodeObj, "text");
            }
            if (nodeObj.val()) {
                str = nodeObj.val();
                ReplaceValue(str, nodeObj, "val");
            }
            if (nodeObj.attr("title")) {
                str = nodeObj.attr("title");
                ReplaceValue(str, nodeObj, "title");
            }
        }
    }

    function ReplaceValue(str, nodeObj, attrType) {
        var arr;
        var pat = new RegExp("[\u4e00-\u9fa5]+", "g");
        while ((arr = pat.exec(str)) != null) {
            if (langPackage[arr[0]]) {
                str = str.replace(arr[0], langPackage[arr[0]]);

                if (attrType == "text") {
                    nodeObj.text(str);
                } else if (attrType == "val") {
                    nodeObj.val(str);
                } else if (attrType == "title") {
                    nodeObj.attr("title", str);
                }
            }
        }
    }
    ReplaceChildChs($(document));
</script>

The above array word substitution;
article about her best to support multiple languages

translate translation needs over the wall way

    <div id="google_translate_element"></div>
    <script>
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({
                pageLanguage: 'zh-CN',
                layout: google.translate.TranslateElement.InlineLayout.SIMPLE
            }, 'google_translate_element');
        }
    </script>
    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    <!-- Begin TranslateThis Button -->
    <div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
    <script type="text/javascript">
        TranslateThis();
    </script>
    <!-- End TranslateThis Button -->

Overall project ideas:

Article simultaneous release to my blog: Portal