Добавьте span-теги вокруг текста (строки), включенного в объект

Question

Привет, я пытаюсь изменить цвет фона текста, который включен в объект. Я пробую это в vuejs.
У меня есть текст (строка) и некоторые данные (объект).
Мое требование, если слово включено в объект. Затем мне нужно изменить цвет фона этого конкретного слова.

Из ответа я получу такой текст: text: "Pavan's\nPavan\nKumar Dasireddy is\ntrying to\nadd\nthe span tag\nto the text\n That is\n in an Object.".

Вызов функции nb2html(this.theText) в <span id="test" v-html="nb2html(this.text)"> </span> для замены \n на тег <br>.

После замены на <br> я вижу пользовательский интерфейс, как показано ниже:

Таким образом, при загрузке страницы включенный текст должен быть выделен некоторым фоновым цветом.

ссылка в песочнице: ссылка в песочнице

Например: в приведенном ниже коде Kumar включен в объект, поэтому мне нужно изменить цвет фона только для Kumar.

Я попытался сопоставить объект и проверить текст с помощью myObject.includes( $ {searchText} ). Если включает, то попытался заменить текст на <span style="background-color: yellow">${searchText}</span>.

Но тег span не добавляет к тексту. Вот мой пример кода:

<template>
  <span>
    <el-row type="flex">
      <el-col>
        <el-card>
          <span id="test" v-html="nb2html(this.text)">
          </span>
        </el-card>
      </el-col>
    </el-row>
  </span>
</template>
<script>
export default {
  name: 'samplefile',
  data() {
    return {
        theText: '',
        text: "Pavan's\nPavan\nKumar Dasireddy is\ntrying to\nadd\nthe span tag\nto the text\n That is\n in an Object.",
        myObject: {
            name: 'Kumar',
            trying: 'add',
            isGood: 'the text which is on tag form of',
            mobile: '9874563210',
            concept: 'trying',
            user:'Pavan',
        }
    };
  },
  watch: {
    document: 'caluclateBoundingBoxes',
    selectedText: 'hideContextMenu',
  },
  mounted() {
    this.caluclateBoundingBoxes();
  },
  methods() {
    nb2html(text) {
        const mainText = text.replace(/\n/g, '<br>');
        this.theText = mainText;
        Object.keys(this.myObject).map((key, index) => {
        const searchText = `${this.myObject[key]}`;

        const n = this.theText.includes(`${searchText}`);
        
        console.log(`index:${index}`, `${key}: ${searchText}`, n, 'position:', this.theText.indexOf(`${searchText}`), 'length:', searchText.length);

        const repText = `<span style="background-color: yellow">${searchText}</span>`;

        this.theText = this.theText.replace(/${searchText}/i, repText);
        return this.theText;
        });
        return this.theText;
    },
    caluclateBoundingBoxes() {
        if (this.myObject) {
            this.myObject = JSON.parse(JSON.stringify(this.myObject));
            console.log('the text is:', this.theText);
            console.log(this.myObject);
          }
    },
  }
}
</script>

Пожалуйста, предложите мне возможный способ достичь этого. Спасибо !!

Answer 1

Я не использую vue.js здесь и, возможно, у вас другая логика, но, надеюсь, этот простой фрагмент javascript может помочь:

var myText = "Pavan's Pavan Kumar Dasireddy is trying to add the span tag to the text that is in an Object."

var myObject = {
  name: 'Kumar',
  trying: 'add',
  isGood: 'the text which is on tag form of',
  mobile: '9874563210',
  concept: 'trying',
  user:'Pavan'
}

var result = myText.split(' ').map(function(word) {
  if (Object.values(myObject).includes(word)) {
    return '<span class="yellow">' + word + '</span>'
  } else {
    return word
  }
})

var e = document.getElementById('result')
e.innerHTML = result.join(' ')

.yellow {
  background-color: yellow;
}

<div id="result"></div>

Если приведенный выше фрагмент недоступен, отметьте codepen .

Answer 2

Добавление this в качестве второго аргумента к map должно исправить это:

Object.keys(this.myObject).map((key, index) => {
    ...
}, this)

Существует проблема области, в которой объявление this в map не распространяется на компонент Vue.