Code Monkey home page Code Monkey logo

jquery.textarea-highlighter.js's Introduction

Build Status Coverage Status

jquery.textarea-highlighter.js

jQuery plugin for highlighting text in textarea

Screen Shot

screen shot

Usage

This is the basic usage in javascript:

// can be a class too $('.someElement')
$('#someElement').textareaHighlighter({
    matches: [
        {
            'priority': 2,                                // if there is overlap with other matches it will highlight a match that has a higher priority
            'match': ['this is a test', 'text to match'], // will check for this matches
            'matchClass': 'match'                         // this class will be added to the matching string
        }, {
            'priority': 1,
            'match': /\{\/?\d+\}/g,
            'matchClass': 'tags'
        }, {
            'priority': 0,
            'match': ['some', 'more', 'here'],
            'matchClass': 'someClass'
        }
    ],
    maxlength: 150,
    maxlengthWarning: 'warning',
    maxlengthElement: $('#someElement').find('.maxlength')
});

You also can add setting with data- attribute in HTML:

<textarea data-maxlength="150" data-debug="true"></textarea>

Events

textarea.highlighter.highlight

This event is triggered when all the highlighting is complete.

$('#someElement').on('textarea.highlighter.highlight', function() {
    // do some cool stuff :)
});

Methods

updateMatches

Update matches that needed to be highlighted

var matches = [{ 'matchClass': 'match', 'match': ['a','b'] }];
$('#someElement').textareaHighlighter('updateMatches', matches);

updateStyle

Update style added by plugin, use this when the textarea layout changes etc...

$('#someElement').textareaHighlighter('updateStyle');

updateHeight

Update textarea & plugins extra div's height

$('#someElement').textareaHighlighter('updateHeight');

destroy

Remove all added HTML/CSS and plugin related event bindings etc..

$('#someElement').textareaHighlighter('destroy');

debugModeOn

Turn debug mode on

$('#someElement').textareaHighlighter('debugModeOn');

debugModeOff

Turn debug mode off

$('#someElement').textareaHighlighter('debugModeOff');

All options

These are the supported options and their default values:

$.textareaHighlighter.defaults = {
    wordBase: true,          // Word base language is English, German etc. Set to false when it's Japanese, Chinese etc.
    caseSensitive: true,     // If matches should be case sensitive or not.
    matches: [               // Array of matches with matchClass & word array
        {
            'priority': 1,                                // if there is overlap with other matches it will highlight a match that has a higher priority
            'match': ['this is a test', 'text to match'], // will highlight text in this array
            'matchClass': 'match'                         // this class will be added to the matching string
        }
    ],
    isAutoExpand: true,      // Set to 'false' if you don't want to expand textarea on input
    typingDelay: 30          // Typing delay in milliseconds
    maxlength: -1,           // -1: disable, some int number over 0
    maxlengthWarning: '',    // Class name to add to text when it's over max length
    maxlengthElement: null,  // jQuery element to update letter count in the view
    debug: false,            // Flag to show debug mode
};

Benchmark sample

v0_4_8 is old version and v0_6_0 is the latest

PhantomJS 1.9.8 (Mac OS X)
  Test with 5 matches: v0_6_0 at 16158 ops/sec (1.76x faster than v0_4_8)
  Test with 10 matches: v0_6_0 at 3391 ops/sec (1.30x faster than v0_4_8)
  Test with 25 matches: v0_6_0 at 1312 ops/sec (3.82x faster than v0_4_8)
  Test with 50 matches: v0_6_0 at 606 ops/sec (8.40x faster than v0_4_8)
  Test with 75 matches: v0_6_0 at 382 ops/sec (11.49x faster than v0_4_8)
Chrome 39.0.2171 (Mac OS X 10.10.1)
  Test with 5 matches: v0_6_0 at 27113 ops/sec (1.12x faster than v0_4_8)
  Test with 10 matches: v0_4_8 at 8669 ops/sec (1.28x faster than v0_6_0)
  Test with 25 matches: v0_6_0 at 2765 ops/sec (3.01x faster than v0_4_8)
  Test with 50 matches: v0_6_0 at 1354 ops/sec (6.24x faster than v0_4_8)
  Test with 75 matches: v0_6_0 at 916 ops/sec (318.10x faster than v0_4_8)
Firefox 31.0.0 (Mac OS X 10.10)
  Test with 5 matches: v0_6_0 at 31165 ops/sec (2.32x faster than v0_4_8)
  Test with 10 matches: v0_6_0 at 6269 ops/sec (3.09x faster than v0_4_8)
  Test with 25 matches: v0_6_0 at 3111 ops/sec (7.49x faster than v0_4_8)
  Test with 50 matches: v0_6_0 at 1635 ops/sec (31.98x faster than v0_4_8)
  Test with 75 matches: v0_6_0 at 1162 ops/sec (167.81x faster than v0_4_8)

jquery.textarea-highlighter.js's People

Contributors

marexandre avatar toshipon avatar

Stargazers

小神经 avatar  avatar  avatar Olga Christiana avatar Tazin Afrin avatar Alexis Montoya avatar Lek Huda avatar KouPeng avatar Batuhan Göksu avatar Frank Glück avatar  avatar Roman Kulikov avatar Andrea Parisi avatar Paul Blaze avatar  avatar PG avatar Heru Rusdianto avatar Rob Garrison avatar Eugene Pisotsky avatar tategakibunko avatar maitokuwahara avatar Tomoki Kozuru avatar Vahid Mohammad Taheri avatar James Moberg avatar Jean Pierre Kolb avatar Kevin Fox avatar Vio Cassel avatar Sneha Parkar avatar  avatar foo9 avatar Artem Diontev avatar suziwen avatar Jesse L.K. Overton avatar Peter Širka avatar Richard Roncancio avatar SwhGo_oN avatar Lajpat Shah avatar  avatar Pedro Coutinho avatar jQueryScript avatar Evan Owens avatar Muloka avatar

Watchers

 avatar  avatar James Cloos avatar DavidZ avatar

jquery.textarea-highlighter.js's Issues

CSS Styling & Positioning Issues

I haven't been able to use this plugin in any projects due to the background highlighting color not aligning with the text in the textarea field. I believe it's due to font spacing, kerning or height issues with the hidden text wrapping consistently with the displayed text. I can only get it to function after sizing everything perfectly using a fixed-width textarea field... which I can't really use since we're using a responsive framework.

Regex Not Working

I'm trying to use this, using the demo usage, and I am getting an error due to the Regex.

$('textarea').textareaHighlighter({
    matches: [
        {
            'priority': 2,                               
            'match': ['this is a test', 'text to match'], 
            'matchClass': 'match'                         
        }, {
            'priority': 1,
            'match': /\{\/?\d+\}/g,
            'matchClass': 'tags'
        }, {
            'priority': 0,
            'match': ['some', 'more', 'here'],
            'matchClass': 'someClass'
        }
    ]
});

It errors out on Line 217 (called on Line 618) because the variable a is null. If I modify the source to account for that being null, I get no errors but Regex doesn't work. If I try throwing it in an array (so that filter will work), it then errors out in escapeHTML, called on Line 626. I also tried passing it as a string rather than a Regexp object and that didn't work (not that I assumed it would, but other libraries do it that way). I wasn't able to find a fix while tinkering with the code.

case sensitivity and keyword counter

Hello
I am trying to implement database driven highlighter, however i have noticed few things:

  1. Works with only case sensitive words, like if word is "Hi there" it only matches with "Hi there" but not with "hi there" or "Hi There".
  2. How can i count each highlighted words and return the output of the counted words?

How do i set non-case sensitive match and words counter?
Can you please add these features.

Thank you!

Multiple space problem

Hi @marexandre,
firstly: your jQuery plugin is very good, thanks for it. I have found a problem: When I add more spaces in a row then the plugin didn't render the highlight very good:

image

Many thanks!

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.