我有以下json作为示例：
{
"Hello":"Hola"
"how":"como"
"You go":"te va"
"text 4": "texto 4"
"text 5: "texto 5"
}
这将为我翻译这些词服务。 因此，我有一个文本区域，我可以在其中写下要翻译的内容，它可以是 1 个单词，也可以是组成一个句子的几个单词
<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>
我遇到的问题是，如何从第一个文本区域输入是只有 1 个单词还是许多单词组成一个句子，去我的 vue18in json 文件中查找翻译并将它们显示在第二个文本区域中。
例如，如果在文本区域 1 中输入："你好"在第二个文本区域中，我将得到"Hola"，或者用户是否输入："你好如何文本 4"我将得到"Hola como texto 4">
第二个文本区域的内容是根据英文文本计算的。 单个大型 RegExp 将替换单个传递中的所有匹配项(这很重要，因此它不会替换替换的文本(。
对于此字典，正则表达式是Hello|how|You go|text 4|text5。
请注意，它区分大小写。使其不区分大小写比在 RegEx 上添加"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>