Code Monkey home page Code Monkey logo

highlight's Introduction

Highlight

Test CI

Orama Highlight allows you to easily highlight substrings in a given input.

Installation

npm i @orama/highlight
bun i @orama/highlight

Usage

import { Highlight } from '@orama/highlight'

const inputString = 'The quick brown fox jumps over the lazy dog'
const toHighlight = 'brown fox jump'

const highlighter = new Highlight()
const highlighted = highlighter.highlight(inputString, toHighlight)

console.log(highlighted.positions)
// [
//    {
//      start: 10,
//      end: 14
//    }, {
//      start: 16,
//      end: 18
//    }, {
//      start: 20,
//      end: 23
//    }
//  ]

console.log(highlighted.HTML)
// "The quick <mark class="orama-highlight">brown</mark> <mark class="orama-highlight">fox</mark> <mark class="orama-highlight">jump</mark>s over the lazy dog"

console.log(highlighted.trim(10))
// "...uick <mark class="orama-highlight">brown</mark>..."

You can always customize the library behavior by passing some options to the class constructor:

const highlighted = new Highlight({
  caseSensitive: true,        // Only highlight words that respect the second parameter's casing. Default is false
  wholeWords: true,           // Only highlight entire words, no prefixes
  HTMLTag: 'div',             // Default is "mark"
  CSSClass: 'my-custom-class' // default is 'orama-highlight'
})

License

Apache 2.0

highlight's People

Contributors

micheleriva avatar saravieira avatar raiindev avatar benjaminleonard avatar

Stargazers

Marcus S. Abildskov avatar  avatar  avatar John Blyberg avatar Leonid Shirmanov avatar Victor avatar ᑭᖇᗴᔕᕼ ᗝᑎƳᗴᗴ avatar  avatar Mattèo Gauthier avatar Bruno Bernard avatar  avatar Francis Turmel avatar Greg Zhang avatar  avatar Thomas Harr avatar Kainoa Kanter avatar Lukasz Hanusik avatar Fuad avatar  avatar Alexei Accio avatar  avatar Abdellah avatar  avatar Rafael Chuluc avatar Danijel Dedic avatar Jonas Galvez avatar Oscar avatar Mattia Astorino avatar Damian Janus avatar Tyler Davis Mitchell avatar John Flores avatar Johnny (Hao) Jiang avatar Nikita avatar Davide Trinastich avatar Michael Demarais avatar Alberto Mendez avatar DamonChen avatar houseme avatar Ilias YAHIA avatar Richard Ortiz avatar Greg Wedow avatar Adam Chwilkowski avatar Ondřej Králík avatar huuya avatar Hannes Widrig avatar Burak M. avatar Nabeel Valley avatar Davide Segullo avatar Jody Donetti avatar Theo Tillberg avatar

Watchers

 avatar

highlight's Issues

Functionality from @orama/plugin-match-highlight

Hi,

Since you are going to be deprecating @orama/plugin-match-highlight, I wanted to ask about your plans for similar features in @orama/highlight. I'm looking at replacing the old plugin, but we rely on the ability for a partial search to highlight multiple words. For example, a search that begins "ju" would highlight words like "just", "juice", "jump", etc. @orama/highlight will only highlight the "ju". The ability to get highlight positions on full words is a feature we'd like to keep.

Include trim option

Would be useful to have the option to trim to a string length either side of the match/matches. Currently doing this outside of the plugin, but requires two function calls – the first to get the positions and the second to highlight the text after it's been trimmed. You can't do it before in case you end up wiping out one of the mark tags.

Not sure the best way to select which position to choose to trim and return. Happy to submit a PR if you'd find it helpful.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.