Add span-tags around the text(string), that included in an object

Question

Hi I'm trying to change the background color of the text that is included an the object. I'm trying it in vuejs.
I've text(string) and some data(object).
My requirement is, if the word is included in the object. Then I need to change the background color of that particular word.

From the response I'll get the text like this: text: "Pavan's\nPavan\nKumar Dasireddy is\ntrying to\nadd\nthe span tag\nto the text\n That is\n in an Object.".

Calling the nb2html(this.theText) function in the <span id="test" v-html="nb2html(this.text)"> </span> for replacing the \n with <br> tag.

After Replacing with <br> I can see the UI as below:

So, when the page loaded the included text should be highlighted with some background color.

sanbox link: Sandbox link

Eg: In the below code, Kumar is included in the object, so I need to change the background color for Kumar only.

I tried mapping the object and checking the text with myObject.includes(${searchText}). If includes then tried to replace the text with the <span style="background-color: yellow">${searchText}</span>.

But span tag not adding to the text.Here is my code sample:

<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>

Please suggest me the possible way to achieve this. Thanks!!

Answer 1

Adding this as a second argument to map should fix this:

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

There is a scope issue where the this in map declaration is not scoped to the Vue component.

Answer 2

I don't use vue.js here and perhaps you have different logic, but hopefully this plain javascript snippet could help:

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>

If the above snippet is unavailable check this codepen.