albertlucianto/vue-text-highlight

Text highlighter library for Vue.js :lipstick:

See working example here.

Installation

npm install --save vue-text-highlight
# or
yarn add vue-text-highlight

Usage

Basic Usage

import Vue from 'vue';
import TextHighlight from 'vue-text-highlight';

Vue.component('text-highlight', TextHighlight);

// new Vue ...

SomeComponent.vue

<template>
  <text-highlight :queries="queries">{{ description }}</text-highlight>
</template>

data() {
  return {
    queries: ['birds', 'scatt'],
    description: 'Tropical birds scattered as Drake veered the Jeep'
  };
}

Output

More Options

All available props in TextHighlight component are:

• queries: Array<String|RegExp>|String|RegExp

  This prop accepts string, regex, and array of strings or regex. If array is given, it will highlight the union of matched strings/regex globally.

• [caseSensitive]: Boolean

  Whether string being searched is case sensitive.

• [diacriticsSensitive]: Boolean

  Whether string being searched is diacritics sensitive.

• [wholeWordMatch]: Boolean

  Whether string being searched as a whole word .

• [highlightStyle]: Object|Array|String

  Styles to be applied to highlighted <mark>. Similar to style bindings in vue, it accepts Array syntax, Object syntax, or plain styling as String. This prop will then be merged with default highlight styles in TextHighlight component. See style binding in Vue.js.

• [highlightClass]: Object|Array|String

  Classes to be added to highlighted <mark>. Similar to class bindings in vue, it accepts Array syntax, Object syntax, or class as String. See class binding in Vue.js.

• [highlightComponent]: Object|String

  By default vue-text-highlight uses <mark> for the highlighting. Pass this props to override with other tag (string) or custom component (Vue component definition).

  This component will be passed with two props from text-highlight:

  • index: Number

    Index of highlighted component.

  • text: String

    Highlighted words, equals to this.$slots.default[0].text

  For more details, see example below.

• Other props and listeners that are not listed above are forwarded to the highlighted component. These props will be merged with higher precendence than index and text passed from text-highlight.

Advanced Usage

There might be a case where you want to do more things with the highlighted words. For that reason, vue-text-highlight supports custom component for the highlighted words. In this case, the following example alerts on click.

OtherComponent.vue

<template>
  <text-highlight
    :queries="queries"
    :highlightComponent="MyClickableComponent"
    :baz="foo"
    @customlistener="alert"
  >
    {{ description }}
  </text-highlight>
</template>

import MyClickableComponent from 'MyClickableComponent';

data() {
  return {
    queries: ['birds', 'scatt'],
    description: 'Tropical birds scattered as Drake veered the Jeep'
    MyClickableComponent,
    foo: 'bar',
  };
},
methods: {
  alert() {},
}

MyClickableComponent.vue

<template>
  <mark class="custom" @click="$emit('customlistener')">
    <slot></slot>
  </mark>
</template>

props: {
  baz: String, // From OtherComponent.vue
  index: Number, // From TextHighlight
  text: String, // From TextHighlight, equals to `this.$slots.default[0].text`
}

Changelog

Changes are tracked in the changelog.

License

vue-text-highlight is available under the MIT License.

vue-text-highlight's Issues

If I only want to highlight one of these words

If there are several same words in the text, but I only want to highlight one of them ,how can I do?

Multiple hightlight

If I type in search input two words, nothing happens. What I need to do for hightlight two words?!

Is possible to customize highlight color?

There is a way to do it? Should add an example to doc?

Thanks

Can you please provide a sample of using highlightComponent with typescript class component?

Getting this error. [Vue warn]: Invalid prop: type check failed for prop "highlightComponent". Expected String, Object, got Function

found in

--->

My CustomComponent.vue looks like this:
<template> <mark class="custom"> <slot></slot> </mark> </template>

<script lang="ts"> import { Component, Vue, Prop } from 'vue-property-decorator' @Component({ name: 'EntityPop' }) export default class extends Vue { //@Prop({ required: true }) private visible!: boolean @Prop({ required: true }) private index!: number @Prop({ required: true }) private text!: string } </script>

vue-text-highlight 2.0.5 fails to resolve

Hi,

I upgraded to 2.0.5 and start getting the following error:

This dependency was not found:

vue-text-highlight in ./src/globalComponents.js

To install it, you can run: npm install --save vue-text-highlight

With 2.0.2 it worked, and I noticed that in this latest version, dist folder is missing.

Render function does not reflect slot content changes

Hi Albert, thanks for the great plugin!

I've encountered an issue that the component does not properly rerender on slot content changes.
Demo: https://jsfiddle.net/o__3/w45jqk9f/

It looks like this this.highlights property is not getting recomputed on this.$slots.default change because this.$slots.default is not reactive.

vue-text-highlight/src/components/index.vue

Lines 29 to 31 in f3565d6

	return <span>
	{this.highlights
	.map(({

However, this.$slots.default change triggers render(h) function, so I moved around some code to come up with a workaround:

Vue.component('text-highlight', {
  extends: TextHighlight,
  data() {
    return {
      text: null,
    };
  },
  created() {
    this.updateText();
  },
  beforeUpdate() {
    this.updateText();
  },
  methods: {
    updateText() {
      const defaultSlot = this.$slots.default;
      let text;
      if (!defaultSlot) text = '';
      else if (defaultSlot[0].tag !== undefined && process.env.NODE_ENV !== 'production') {
        /* eslint-disable-next-line no-console */
        console.warn('children of <text-highlight> must be a plain string.');
        text = '';
      } else {
        text = defaultSlot[0].text;
      }
      this.text = text;
    },
  },
  computed: {
    highlights() {
      return highlightChunks(this.text || '', this.queries, this.caseSensitive);
    },
  },
});

Might not be the best solution but it seems to be working. Let me know if you need more info. Thanks!

not support IE

vue-text-highlight is usingclone-regexp module

The clone-regexp module uses the arrow function.
However, clone regexp does not have a babel setting, it uses the arrow function as it is.
In addition, vue-highlight-text excludes node_module in the rolling option, so IE can not be supported because of the arrow function.

Disabling diacritics sensitive does not work with not latin letters

Hi Albert,

i think the diacritics package does not work that well in non latin languages ( i.e Greek ), something that would work could be
normalizing the string like str.normalize("NFD") and then replacing the diacritics with a .replace(/[\u0300-\u036f]/g, "")

how does that sound ?

indicesOf on RegExp causing false matches

Hey Albert,
It seems like the nested call of indecesOf is causing false matches when your original query is a RegExp.

If my original regex is /\bav\b/ig the nested call changes it to av.
This generates indeces that are not matched by the original regex.

Simple JSFiddle demonstrating issue https://jsfiddle.net/1dfz3sk6/

Vue3.0 feature is not supported?

I'm running an error, in vue3.0 environment.

SSR not supported?

I am developing an server side rendered app (using quasar framework) which does not work with vue-text-highlight even though I exclude the component from being rendered on the server.

webpack output is served from /
/a53e2c7b74cda87c8ba6.hot-update.json -> error during render
ReferenceError: document is not defined
    at /Users/marvin/sites/lumen/quasar/node_modules/vue-text-highlight/dist/vue-text-highlight.umd.js:1579:14
    at /Users/marvin/sites/lumen/quasar/node_modules/vue-text-highlight/dist/vue-text-highlight.umd.js:2:83
    at Object.<anonymous> (/Users/marvin/sites/lumen/quasar/node_modules/vue-text-highlight/dist/vue-text-highlight.umd.js:5:2)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at r (/Users/marvin/sites/lumen/quasar/node_modules/vue-server-renderer/build.dev.js:9310:16)
    at Object.vue-text-highlight (webpack:/external "vue-text-highlight":1:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module../src/router/index.js (server-bundle.js:1574:76)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module../.quasar/app.js (server-bundle.js:142:78)
    at __webpack_require__ (webpack/bootstrap:25:0)

how to remove accents ?

removeAccent(text){
                var textNormalized = text.normalize('NFD').replace(/[\u0300-\u036f]/g, "");
                return textNormalized;
            },

<text-highlight :queries="searchedWords" :sanitize="removeAccent(text)">@{{ text }}</text-highlight>

Any way to use with v-html description ?

Hi Albert,
How would it be possible to search query inside bound text (v-html) ?

How to use v-html

I have a .vue file with the following code:

<section v-html="page.parsed_content"></section>

which, obviously, renders page.parsed_content as raw HTML within the section tag.
Now I'd like to add highlights but don't know how to mix/use v-html with the description used in vue-text-highlight

<section>
  <text-highlight :queries="testhighlight" v-html="page.parsed_content"></text-highlight>
</section>

does not work, I'm new to vue and I guess I am missing something very simple, any idea?
Thanks!

Is there a way to remove text__highlight class all togather?

Hey,
I noticed I was not able to change the styles even after binding classes.
The text__highlight class is overriding every other classes(tailwind) I add.
I do not wanna use !important, is there any other solution?

<text-highlight 
      :queries="queries"
      :highlightClass="['bg-red-200', 'rounded']"
      >

Regards,
Geon George

highlight whole words only

is there a way to configure only the entire word match

for example, in this text, I want to highlight "start" only as a complete word
not part of Starting

How does it works with vue directives v-html ?

How does this component works with vue directives "v-html" instead of vue text interpolation using “Mustache”. for example - currently in your example it's written
<text-highlight :queries="queries">{{ description }}</text-highlight>
If I want to use it like this --
<text-highlight :queries="queries"><span v-html="rawHtml"></span></text-highlight>
OR
<text-highlight :queries="queries" v-html="rawHtml"></text-highlight>

Count total text highlights

How, using this library count the total text highlights ?

Typescript support

Great Library!

I'm using vue.js and typescript. Is there any typescript version for this library?

Please let me know
Thanks,

Highlighting issue with character "ß"

As soon as I add a german "ß" into the text which is highlighted, all highlighted matches after this special character are corrupt / moved at one character. Even if you're not searching for this character... just the presence of this special character causes the issues!

Jump to found matches

Is there any way to jump at found matches when enter is clicked, or does this have to be programmed from scratch outside of vue-text-highlight?

Error in npm run build (webpack)

Hi, this error show to run npm run build:

ERROR in build.js from UglifyJs
Unexpected token: operator (>) [./node_modules/vue-text-highlight/dist/vue-text-highlight.esm.js:805,0][build.js:55768,22]

Inline CSS Sourcemaps in Production Build

The vue-text-highlight.min.js file contains inline source maps for the scss styles compiled from the vue files:

map:{version:3,sources:["/Users/albertlucianto/Projects/vue-text-highlight/src/components/index.vue","index.vue"],names:[],mappings:"AAiFA;EACA,mBAAA;EACA,kBAAA;AAAA;;AC/EA,oCAAoC",file:"index.vue",sourcesContent:[null,".text__highlight {\n  background: #ffcc00;\n  border-radius: 3px; }\n\n/*# sourceMappingURL=index.vue.map */"]

IE11 errors due to incomplete transpiling

Parts of the vue-text-highlight.min.js are not being transpiled, leading to errors in IE11. The function createInjector for example contains an arrow function (=>) which throws an error in IE11.

can i use .js directly without npm ?

Is there a CDN version available?

Would it be too much to ask to create a CDN version for this module? I'd like to know how I can help!

Demo is broken!

At the moment this link from the README 404s:
https://albertlucianto.github.io/vue-text-highlight

Events when click on the highlighted word

Would be useful If an event is triggered when the user clicks on a highlighted word.