2012-04-25 145 views
1

我想用javascript构建我自己的翻译功能。 我已经有一个函数language.lookup(键),转换一个字或词:使用javascript正则表达式来翻译html

var frenchHello = language.lookup('hello') //'bonjour' 

现在我想编写一个函数,它接受一个HTML字符串和我的查找功能将其翻译。在html字符串中,我将有一个特殊的语法,例如#[translationkey],它将指出这个词应该被翻译。

这是结果我想:

var html = '<div><span>#[hello]</span><span>#[sir]</span>' 
language.translate(html) //'<div><span>bonjour</span><span>monsieur</span> 

我怎么会写language.translate? 我的想法是用正则表达式过滤掉我的特殊语法,然后在每个键上运行language.lookup。也许用字符串替换什么的。

当谈到正则表达式,我只是想出了一个非常不完整的例子,但我总是把它包括在内,所以也许有人会想到我正在尝试做什么。然后,如果有更好的但完全不同的解决方案,那就更值得欢迎了。

var value = "#[hello], nice to see you."; 

lookup = function(word){ 
    return "bonjour"; 
}; 

var res = new RegExp("\\b(hello)\\b", "gi").exec(value) 

for (var c1 = 0; c1 < res.length; c1++){ 
    value = value.replace(res[c1], lookup(res[c1])) 
}  
alert(value) //#[bonjour], nice to see you. 

当然,正则表达式不应该过滤掉hello这个词,而是过滤出语法,然后通过分组或类似的方式收集关键字。

任何人都可以帮忙吗?

回答

2

只要使用String.replace方法的调用函数指定为第二个参数,生成替换文本,使能力的全局替换使用正则表达式匹配你的语法:

var value = "#[hello], #[sir], nice to see you."; 

lookup = function(full_match, word){ 
    if(word == 'hello') 
     return "bonjour"; 
    if(word == 'sir') 
     return "monsieur" 
}; 

console.log(value.replace(/#\[(.+?)\]/gi, lookup)) 

结果: bonjour,monsieur,很高兴见到你。

当然,当你替换列表变大了,你最好使用查找对象,而不是一系列的查找功能IFS的,但你真的可以做任何你想做那里。

1

您可以使用类似:

#\\[[^\\]]*\\] 

,散列随后左方括号后跟零个或多个字符不包括右方括号匹配,其次是一个封闭的方括号。

或者,在服务器端处理翻译可能更好(甚至可能通过模板引擎),并将翻译后的响应发回给客户端。否则,(取决于您正在处理的具体问题),您最终可能会向浏览器发送大量数据,这可能会使您的应用程序响应速度变慢。

编辑: 这里是工作一段代码:“)主(”

var q="This #[ANIMAL1] was eaten by that #[ANIMAL2]"; 
    var u = {"#[ANIMAL1]":"Lion","#[ANIMAL2]":"Frog"}; 

    function insertAnimal(aString, lookup){ 
     var res = (new RegExp("#\\[[^\\]]*\\]", "gi"))   
     while (m = res.exec(aString)){ 
      aString = aString.replace(m, lookup[m]) 
     }  
     return aString; 
    } 

    function main(){ 
     alert(insertAnimal(q,u));   
    } 

可以调用从HTML文档的身体onload事件

+0

是的,最好是做这个服务器端。否则你会让客户端加载两种语言,一种将被替换。 – Spoike 2012-04-25 08:26:07

+0

您可以编辑完整的可运行示例的答案,因为我无法使其与您的建议一起工作。 – John 2012-04-25 08:27:59

+0

人,用?修改。每次我看到“不包括”范围,而不是简单的节约调节剂,我的眼睛流血的疼痛。 – 2012-04-25 09:00:39

0

我可以比较你的要求,“解决内容中的模板文本“。如果使用Jquery是可行的,你应该尝试Handlebars.js

1

你可以试试这个找到所有出现:

var re = new RegExp('#\\[([^\\]]+?)\\]', 'gi'), 
    str = '#[value1] plain text #[value2]', 
    match; 

while (match = re.exec(str)) { 
    console.log(match); 
} 
+0

我实际上在循环条件下第一次从re.exec(str)中获得null。表达是否正确? – John 2012-04-25 08:44:16

+0

看起来问题出在'[\\]]'中,用'。'代替。 – lazyhammer 2012-04-25 08:48:36

+0

好吧,错误本地化和修复:)它括号内缺少'^' – lazyhammer 2012-04-25 08:53:03