Xtykutl

<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'snPavannKumar Dasireddy isntrying tonaddnthe span tagnto the textn That isn 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>

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>