The highlight text component for Riot.js

Installation

npm ins --save-dev riot-hi-text

Examples

Basic

Import script, the standalone script files are in the dist .

<script src="riot.hi-text.js"></script>

Webpack or Browserify:

require('riot-hi-text')

Create tags

<hi-text>
	Hello highlight text!!!!
</hi-text>

require('riot-hi-text')

var hiTextTags = riot.mount('hi-text')
hiTextTags.forEach(function(tag){
	tag.setHighlight('h')
})

yield: every h will warp with <span class="highlight">

<hi-text>
	<span class="highlight">H</span>ello <span class="highlight">h</span>ig<span class="highlight">h</span>lig<span class="highlight">h</span>t text!!!!
</hi-text>

Dynamic

<app>
	<hi-text>{text}</hi-text>
	this.tags['hi-text'].text = 'hello hi text!!'
</app>

Options

opts['class-name']

Custom class name, default is highlight

<hi-text class-name="my-highlight"></hi-text>

opts['case-sensitive']

Match word with case sensitive. default is false

<hi-text case-sensitive="true"></hi-text>

equal to

<hi-text case-sensitive></hi-text>

API

setHighlight(word, [case_sensitive = false])

Set highlight with word

clean()

Clean all highlight.

hasMatched

true or false, change everytime after invoking setHighlight()

Asynchronous

<app>
	<h1-text>{text}</h1-text>

	var tag = this

	$.ajax({
		url: '/api/case'
	})
	.done(function(data){
		tag.tags['h1-text'].text =  data
		tag.tags['h1-text'].update()
		tag.tags['h1-text'].setHeightlight('hi')
	})
</app>

With chain

The API all return tag instance itself, so you can chain the method

tag
	.clean()
	.setHighlight('Hi')