请教字符串替换方式页面多语言的js实现方法

lionio 2013-05-09 06:21:58

原页面为普通中文动态页，想通过简便的加载js来实现多语言切换。类似那个繁简互转的js（字换字），利用js中词典达到客户端的词（句）和词（句）的字符串替换显示。
所了解到的常规多语言方式，要么是将需要翻译的文本标签加自定义属性，要么就是需要替换原文本为自定义格式，以此来方便遍历替换。但这样事实上使现在的维护量变大。

以下我找资料搜到一段代码，已经比较接近需求了，但在ie6-8下报错（SCRIPT438: 对象不支持此属性或方法），而在ff和chrome下完全正常，请高手帮忙解决一下哈！



<!doctype html>

<html>

<head>

<title>Localization</title>

<meta charset="utf-8" />

<style type="text/css">

    label { width:150px; display:inline-block;}

</style>



<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript">

(function(lazylocalization) {



    lazylocalization.dictionary = {};

    lazylocalization.selectors = '';



    lazylocalization.init = function(params) {

        lazylocalization.dictionary = params.dictionary;

        lazylocalization.selectors = params.selectors;



        $(lazylocalization.selectors).each(function(i, element) {

            if (element.firstChild && element.firstChild.nodeType === 3) {

                element.firstChild.default_lang = element.firstChild.data;

            }

        });



        lazylocalization.localize(params.lang);

    };



    lazylocalization.localize = function(lang) {

        var language_code = $.inArray(lang, lazylocalization.dictionary.Languages);

        if (language_code < 0) {

            alert(lang + ' is not a valid language');

            return;

        }

        $(lazylocalization.selectors).each(function(i, element) {

            if (element.firstChild && element.firstChild.nodeType === 3) {

                element.firstChild.data = lazylocalization.localized(element.firstChild.default_lang, language_code);

            }

        });

    };



    lazylocalization.localized = function(text, language_code) {

        var key = text.split(' ').join('_'),

            l = '';

        if (lazylocalization.dictionary[key]) {

            l = lazylocalization.dictionary[key][language_code];

        } else {

            l = text;

        }

        return l;

    };



}(window.lazyLocalize = window.lazyLocalize || {}, jQuery));





$(document).ready(function () {

var dictionary = {

Languages:[

'en',

'zh-TW',

'zh-CN'

],

姓名:[

'Name',

'姓名',

'姓名'

],

Date_of_birth:[

'Date of birth',

'生日',

'生日'

],

Address:[

'Address',

'地址',

'地址'

],

Phone:[

'Phone',

'電話',

'电话'

],

Profile:[

'Profile',

'檔案',

'档案'

],

Resume:[

'Resume',

'履歷',

'简历'

],

Contact:[

'Contact',

'聯繫方式',

'联系方式'

],

邮箱:[

'Email',

'郵箱',

'邮箱'

],

Website:[

'Website',

'網站',

'网站'

],

a16_Aug_1982:[

'16 Aug 1982',

'1982年8月16號',

'1982年8月16日'

]

};



var selectors = 'label,a,h2,span';



lazyLocalize.init({ 

    lang: navigator.language || navigator.userLanguage,

    dictionary: dictionary,

    selectors: selectors

});



});



</script>

</head>

<body>

    <a href="javascript:lazyLocalize.localize('en')">EN</a>

    <a href="javascript:lazyLocalize.localize('zh-CN')">简体中文</a>

    <a href="javascript:lazyLocalize.localize('zh-TW')">繁體中文</a>



    <h2>Contact</h2>

    <ul>

        <li><label>姓名</label><span>lionio</span></li>

        <li><label>Date of birth</label><span>a16 Aug 1982</span></li>

        <li><label>Address</label><span>via c.so del popolo vico III, 3 86019 Vinchiaturo (CB) Italy</span></li>

        <li><label>邮箱</label><span>lionio@csdn.net</span></li>

        <li><label>Phone</label><span>+86.12345666</span></li>

        <li><label>Website</label><span>www.csdn.net</span></li>

    </ul>



    <ul>

        <li><a href="#">Profile</a></li>

        <li><a href="#">Resume</a></li>

        <li><a href="#">Contact</a></li>

    </ul>

</body>

</html>