elonehoo / paragraph-highlight

vue paragraph highlight

Paragraph Highlight

Install

# npm 
npm i @elonehoo/paragraph-highlight

# yarn
yarn add @elonehoo/paragraph-highlight

# pnpm
pnpm i @elonehoo/paragraph-highlight

Usage

To use it, just provide it with search words to props and a body of text to default slots.

<script setup lang="ts">
import paragraphHighlight from '@elonehoo/paragraph-highlight/src'
</script>

<template>
  <paragraphHighlight query="vue">The word highlighter library for Vue 3.x</paragraphHighlight>
</template>

Output

Details

Props

Property	Type	Required?	Description
query	String or RegExp	✓	Search words. Can be use string or regular expressions.
caseSensitive	Boolean		Search should be case sensitive. defaults to false.
splitBySpace	Boolean		Whether split the string with spaces to make it a search string. If false, the string is being searched as a whole word. defaults to false. When the query is set to a RegExp, the value of splitBySpace will be set to false.
highlightTag	String		Type of tag to wrap around highlighted matches; defaults to mark.
highlightClass	String or Object or Array		Classes to be added to highlighted tag. Similar to class bindings in vue, it accepts Array syntax, Object syntax, or class as String.
highlightStyle	String or Object or Array		Styles to be applied to highlighted tag. Similar to style bindings in vue, it accepts Array syntax, Object syntax, or plain styling as String.
wrapperTag	String		Type of tag to wrap around whole text; defaults to span.
wrapperClass	String or Object or Array		Classes to be added to wrap around the whole tag. Similar to class bindings in vue, it accepts Array syntax, Object syntax, or class as String.
textToHighlight	String		Text to highlight matches in. If this is not specified, the default slot value will be used for the search.

Emits

Property	Type	Description
matches	Array	Returns matches words. This event fires when mounted and when the query and highlighted text are changed.

By using matches emit, you can know from the parent component whether it is highlighted by VueWordHighlighter or not.

Example

<script setup lang="ts">
import { ref } from "vue";
import paragraphHighlight from '@elonehoo/paragraph-highlight/src'

const matches = ref([]);

</script>

<template>
  <div>
    Matched word count: {{ matches.length }}
  </div>
  <paragraphHighlight query="vue" @matches="(e) => { matches = e }">
    The word highlighter library for Vue 3.x
  </paragraphHighlight>
</template>