0.1.0 • Published 5 years ago
highlight-text-words v0.1.0
highlight-text-words
You can highlight words of texts on JavaScript. This lib is supporting TypeScript.
Install
yarn add highlight-text-words
or npm install highlight-text-words
.
Usage
API
function highlightText(textToHighlight: string, searchWords: string[]): Chunk[]
export interface Chunk {
isHighlighted: boolean
begin: number
end: number
}
Result
import { highlightText } from 'highlight-text-words`
const chunks = highlightText('foo-bar-baz', ['bar'])
console.log(chunks)
/**
{
begin: 0,
end: 4,
isHighlighted: false
},
{
begin: 4,
end: 7,
isHighlighted: true
},
{
begin: 7,
end: 11,
isHighlighted: false
}
*/
Example
import { highlightText } from 'highlight-text-words`
import escape from 'escape-html'
const chunks = highlightText('foo-bar-baz', ['bar'])
const rawHtml = chunks
.map(chunk => {
const { start, end, isHighlighted } = chunk
const text = props.text.substr(start, end - start)
if (isHighlighted) {
return `<span class="primary">${escape(text)}</span>` // You had better escape texts when highlight user generated contents.
} else {
return escape(text)
}
})
.join('')
console.log(rawHtml)
// foo-<span class="primary">bar</span>-baz
0.1.0
5 years ago