在返回的结果中突出显示搜索字符串

Question

The v-model is search and it's linked with input field where user types in their search string.

Then, the computed method filters entries and returns those that contain search string.

The original, without search string highlighting, looks like this:

computed: {
      filteredEntries() {
        if (this.search !== null && this.search !== '' && this.search.length > 0) {
          return this.json.filter(entry => {
            return JSON.stringify(entry).toLowerCase().indexOf(this.search.toLowerCase()) > -1
          })
        }
        else {
          return null
        }
      },
(...)

And what I tried to do ending up with an error looks like:

computed: {
      filteredEntries() {
        if (this.search !== null && this.search !== '' && this.search.length > 0) {
          return this.json.filter(entry => {
            return JSON.stringify(entry.replace(
                                 this.search, 
                                 `<span style="background: #f0adf0;">${this.search}</span>`)
             ).toLowerCase().indexOf(this.search.toLowerCase()) > -1
          })
        }
        else {
          return null
        }
      },
(...)

The error thrown by Vue is TypeError: entry.replace is not a function .

json variable looks like (all values are searchable):

[
    {
        "id": 10,
        "owner": "Debbie",
        "items": "GTX-200, IOI-209, UTF-120"
    },
    {
        "id": 14,
        "owner": "Greg",
        "items": "FVV-300, UPI-229, UDO-175"
    },
    (...)
]

Processed data is displayed withing constructs like:

<v-card v-for="data in filteredEntries" :key="data.id">
  <v-card-title>{{ data.items }}</v-card-title>
</v-card>

Is it even possible to highlight the search string in here, or should it be done elsewhere?

Answer 1

Try to convert the json array to string then replace the search value by that highlighted one:

computed: {
      filteredEntries() {
     return this.json.map(entry=>JSON.stringify(entry)).join('##').replace(this.search, `<span style='background: #f0adf0;'>${this.search}</span>`).split("##").map(entry=>JSON.parse(entry))
     }

}

 json = [{ "id": 10, "owner": "Debbie", "items": "GTX-200, IOI-209, UTF-120" }, { "id": 14, "owner": "Greg", "items": "FVV-300, UPI-229, UDO-175" }, ] let search = "UPI" let highlighted = json.map(entry => JSON.stringify(entry)).join('##').replace(search, `<span style='background: #f0adf0;'>${search}</span>`).split("##").map(entry => JSON.parse(entry)) console.log(highlighted)