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)中的 函数，将\n替换为 标签。

用 替换后，我可以看到如下所示的UI：

因此，当页面加载时，包含的文本应以某些背景色突出显示。

sanbox链接：Sandbox link

例如：在下面的代码中，对象中包含Kumar，因此我只需要更改Kumar的背景颜色。

我尝试映射对象并使用myObject.includes( $ {searchText} )检查文本。如果包含，则尝试用${searchText}替换文本。

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

将batch.size添加为linger.ms的第二个参数应该可以解决此问题：

this

存在一个范围问题，其中map声明中的Object.keys(this.myObject).map((key, index) => { ... }, this)不属于Vue组件。

Answer 2

我在这里不使用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。

在对象中包含的文本（字符串）周围添加跨度标签

2 个答案: