Simple Ember.Helper that highlights matching parts of a text.

Downloads in past


911.2.36 years ago6 years agoMinified + gzip package size for ember-text-highlight in KB


Ember Text Highlight Build Status Coverage Status Code Climate Greenkeeper badge npm
This addon exposes a simple Ember.Helper that wraps matching parts of a text in a span with a stylable CSS class (mark).
It picks the algorithm that likely performs best in the current environment, making it up to twice as fast as the idiomatic implementation with regular expressions.
Ember Text Highlight Demo (2MB)


  1. Pick one way to install the addon.
$ ember install ember-text-highlight
$ yarn add ember-text-highlight --dev
$ npm install ember-text-highlight --save-dev
  1. Wrap around your template strings
{{text-highlight content query=query}}
  1. Style
Lets say `content` is `Bryan Burke` and `query` is `Bry`:

{{text-highlight 'Bryan Burke' query='bry'}}

The rendered HTML will look like this:

<span class="mark">Bry</span>an Burke

You can now style the CSS class `.mark` according to your wishes and context.

A good start might be the style you see in the demo video above:

.mark {
  padding: 0 !important;
  background-color: rgba(255, 238, 115, 0.59);

[Twitter Bootstrap](https://getbootstrap.com/) already ships a [pre-styled `.mark` class](https://v4-alpha.getbootstrap.com/content/typography/#inline-text-elements).


  • Fork repository
  • git clone <forked-repository-url>
  • cd ember-text-highlight
  • yarn install
  • Make sure everything works before you start: yarn run test (Runs ember try:each to test against multiple Ember versions)
  • Improve something
  • Re-run tests and adapt/expand
  • Create a pull request 🙌