here's one of my puted methods:

            filtered() {
                return this.groups.map(group => {
                    return group.replace(this.search, '<span class="has-background-primary">' + this.search + '</span>');
                })
            }

This is supposed to highlight text in a searchbox, but the < is escaped to <. What should i do to suppress escaping or how can I do it better?

here's one of my puted methods:

            filtered() {
                return this.groups.map(group => {
                    return group.replace(this.search, '<span class="has-background-primary">' + this.search + '</span>');
                })
            }

This is supposed to highlight text in a searchbox, but the < is escaped to <. What should i do to suppress escaping or how can I do it better?

• javascript
• html
• vue.js
• filtering
• html-escape-characters

• 1 wha r u trying to do because as it looks from here you can do this with v-if – Reşit Körsu Commented Oct 3, 2018 at 16:09
• I'm trying to highlight searched text. if I have 'mozambik' in the list and 'zam' in searchbox i want to have moZAMbik, where caps letter are highlighted so it should look like: Mo<span class="has-background-primary">zam</span>bik – Zbyszek Kisły Commented Oct 3, 2018 at 16:11
• 1 Might be similar to this. stackoverflow./questions/30877491/vue-display-unescaped-html – Stephen Gilboy Commented Oct 3, 2018 at 16:27

1 Answer 1

You're on the right track. The only thing missing is a v-html at the place where you render your result/list.

<div v-for="item in items" v-html="item">
  <!-- if the item now contains raw html it will not be escaped -->
</div>

I've created a small fiddle for demonstration: http://jsfiddle/6bto2nkv/