如何使用 vuei18n 翻译从文本区域输入的句子或单词？

Question

我以下面的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"

Answer 1

第二个文本区域的内容是从英文文本计算而来的。一个大的 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, '\')).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>

如何使用 vuei18n 翻译从文本区域输入的句子或单词？

How to translate a sentence or word entered from a textarea with vuei18n?

vuejs2

vue-i18n