Заменить строку в текстовой области с эмодзи | VueJS

Question

У меня есть текстовая область для сообщения, где некоторые строки, такие как ":-)", должны быть заменены на эмодзи, такие как ?. Текстовая область имеет v-модель в свойстве data-message.

Я добавил функцию в метод часов:

  watch: {
message: function() {
  this.message = this.message.replace(":-)", "?");
  this.message = this.message.replace(":-(", "?");
  this.message = this.message.replace(";-)", "?");
  this.message = this.message.replace(":-|", "?");
  this.message = this.message.replace(":'-(", "?");
  this.message = this.message.replace(":-*", "?");
  this.message = this.message.replace("*.*", "?");
  this.message = this.message.replace(";-P", "?");
  this.message = this.message.replace("8-)", "?");
  this.message = this.message.replace(":-D", "?");
  this.message = this.message.replace("=-D", "?");
}
},

Проблема в том, что на моем MacBook Pro и на моем iPhone это работает как шарм. Но у многих других пользователей (Windows 10 с Chrome, Firefox, et c.) Возникают проблемы с задержкой при вводе сообщения. Как я могу оптимизировать этот вариант использования, чтобы каждый мог работать с нормальной скоростью?

Answer 1

что-то вроде этого:

watch: {
  message: function() {
    const replacements = {
      ":-)": "?",
      ":-(": "?",
      ";-)": "?",
      ":-|": "?",
      ":'-(": "?",
      ":-*": "?",
      "*.*": "?",
      ";-P": "?",
      "8-)": "?",
      ":-D": "?",
      "=-D": "?"
    }
    Object.keys(replacements).forEach(k => {
      this.message = this.message.replace(k, replacements[k])
    })
  }
}