VueJS Как найти конкретные элементы в строке и заменить их

Question

Как мне найти и заменить определенные html теги в vue? У меня есть некоторые теги <b> и <i>, которые я хочу заменить тегами <span>, но я не понял, как это сделать.

Например, я попробовал это:

<button @click="replace">Replace</button>

data() {
  return {
    html: 'Lorem ipsum <b>dolor</b> sit amet, consectetur <i>adipiscing</i> elit, sed do eiusmod tempor <b>incididunt</b> ut labore et dolore magna aliqua'
  }
},
methods() {
  replace() {
     this.html.replace('b', '<span style="font-weight:bold">');
     this.html.replace('i', '<span style="font-style:italic">');
  }
}

но это не работает.

Как я могу решить эту проблему?

Answer 1

Есть несколько проблем с подходом в оригинальном посте. Возможно, вы захотите узнать подробности для String.prototype.replace()

• Метод replace не изменяет исходную строку;он возвращает новый. Итак,

this.html = this.html.replace(/*...*/);

• Вы захотите заменить весь тег, а не только его имя. Итак,

this.html = this.html.replace("<b>", /*...*/);

• Вам также необходимо заменить закрывающие теги. Итак,

this.html = this.html.replace("<b>", /*...*/).replace("</b>","</span>");

• Возможно, вы захотите заменить все теги, а не только первый. Так что

this.html = this.html.replace(/\<b\>/gi, /*...*/).replace(/\<\/b\>/gi,"</span>");

Этот подход, конечно, не будет работать, если существующие элементы имеют какие-либо атрибуты