如何用vuei18n翻译从文本区域输入的句子或单词？
如何用vuei18n翻译从文本区域输入的句子或单词？
提问于 2020-05-17 04:40:01
我以下面的json为例：
{
"Hello":"Hola"
"how":"como"
"You go":"te va"
"text 4": "texto 4"
"text 5: "texto 5"
}这将为我翻译这些单词提供服务。因此，我有一个文本区域，我在这里写下我想要翻译的东西，它可以只有一个单词，也可以是几个组成句子的单词
<v-card-text>
<v-textarea
clearable
clear-icon="cancel"
label=""
v-model="txtEspaniol"
></v-textarea>
</v-card-text>我也有一个文本区域，我将在其中获得翻译的输出
<v-card-text>
<v-textarea disabled v-model="txtEnglish"></v-textarea>
</v-card-text>我遇到的问题是，如何从第一个文本区输入组成句子的一个单词或多个单词，然后在我的vue18in json文件中查找翻译，并在第二个文本区中显示它们。
例如，如果在文本区域1中输入：'Hello‘在第二个文本区域中我将获得’Hola‘，或者用户是否输入：'Hello how text 4’我将获得"Hola como texto 4“
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-17 09:37:16
第二个textarea的内容是从英文文本计算出来的。一个大的RegExp会在一次遍历中替换所有出现的内容(重要的是它不会替换被替换的文本)。
对于本词典，RegExp为Hello|how|You go|text 4|text5。
请注意，它区分大小写。让它不区分大小写要比仅仅在RegExp上添加"i“选项要复杂一些。
Vue.config.productionTip = false
new Vue({
el: '#app',
data() {
return {
txtEnglish: '',
dictionary: {
"Hello": "Hola",
"how": "como",
"You go": "te va",
"text 4": "texto 4",
"text 5": "texto 5"
}
}
},
computed: {
txtEspaniol() {
return this.translate(this.txtEnglish, this.dictionary)
}
},
methods: {
translate(str, dict) {
const regex = Object.keys(dict).map(words => words.replace(/([-[\]{}()*+?.\\^$|#,])/g, '\\$1')).join('|')
return str.replace(new RegExp(regex, 'g'), matched => dict[matched])
}
}
});<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<textarea v-model="txtEnglish"></textarea>
<textarea :value="txtEspaniol"></textarea>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61843255
复制相关文章
相似问题
腾讯云开发者
