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.js v3.20 or above
• Ember CLI v3.20 or above
• Node.js v12 or above

ember install @charlesfries/ember-text-highlight

{{text-highlight this.content query=this.query}}

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 already ships a pre-styled .mark class.

See the Contributing guide for details.

This project is licensed under the MIT License.