garysieling/jquery-highlighttextarea

jQuery highlightTextarea

Overview

highlightTextarea is a jQuery plugin which allows you to highlight words and sentences inside of <textarea> and <input> elements. Words are defined in a jQuery array and you can customize highlight color and case sensitivity. The highlighting updates itself when typing in the <textarea> and follows scroll and resizing (with jQuery-UI).

Documentation

http://garysieling.github.io/jquery-highlighttextarea/

Development status

3.1.3: Support text ranges with HTML entities

3.1.2: Added tests for jQuery versions & verify on jQuery 1.5+

jquery-highlighttextarea's Issues

Highlighting Problems

This sounds like a great plugin. However, I cannot get it to highlight the proper text. See attached screen snippet (trying to highlight the words " and " & "artist"). It is highlighting the correct line but not the correct word. I am using the Twitter Boostrap framework with jquery, jqueryui.

Is overflow on root element necessary?

https://github.com/mistic100/jquery-highlighttextarea/blob/master/jquery.highlighttextarea.css#L9

I've removed the line above because we style the input/textarea with a glowing effect on focus.

Textarea border

The highlighter container does not take into account the textareas border style nor border with. If you have a border around the textarea (for example, a 5px solid), then the container will be of by that much.

Misalignment when resizing the textarea

Hi,
first off: nice plugin.
Here's an issue with it:
http://natea.ro/share/highlighttextarea.png

when the textarea has a certain width, the highlighted part is misaligned, as in the picture.
I did not check the reason, but it seems to have something to do with the width of the overlaid div, and how the text within it is moved on the next line. Issue occurs in IE and chrome. I did not check any other browser.

Best regards,
Nicu

textarea text overlap with div and after destroy textarea movedown

When I am opening the textarea in viewmodel window/dialog highlighttext coming according to the image 1 and after clicking inside the text area its coming overlapping to and looks light 2 paragraphcs overlapping online over other. Please see image 2

Extraneous Incorrect Highlighting

I was using the index range property. If we remove the whole text from textarea, then also some part of it is highlighted incorrectly. Also if we start typing two or three characters then the highlight keeps on changing in a weird manner.

http://mistic100.github.io/jquery-highlighttextarea/examples.html#range

Miss allign of text area and div text overlay .. appears double characters

Browser: IE 6 , IE 7 , IE 8 .
words: ['€','“','ｽ','›','&','>','a','<','硎'],

<textarea id="demo5" cols="50" rows="5">a ｽ stupid code . > zzzzzzzzzz > 硎 < & </textarea>

basically fails for special chars...

looking for quick solution..

would like a first class 'clear' or 'dispose' method

I guess I can just tear down the whole plugin, but, wish there was a better way to clear its effects.

I guess I just re-instantiate with an empty 'words' array in the config object

How to remove the highlight?

How can i highlight and then remove it when needed?

Basic SMARTY code highlighting

Hello!
I would like to use your jQuery plugin: highlightTextarea to highlight Smarty templates but I have some problem...

My regular expression just doesnt work: '{.+}' (It highlight wrong places).
I tested it by this tool: http://gskinner.com/RegExr/

I include some smarty code to play with:

<p>{$image}</p>
<h3>{$auction.auction_link}</h3>
<p>Your price: {if $auction.final_price gte 0}</p>
<h2>{$auction.final_price|money}</h2>
<p>Please follow the steps in <em><strong>How to proceed with order?</strong></em> section.</p>
<p>{else}</p>
<h2>{"0"|money}</h2>
<p>We will transfer <strong>{$auction.final_price_no_minus|money}</strong> to your account!</p>
<p>{/if}</p>

Doesn't work on scaled up pages

My default scale in chrome is set to 125%, and this is how highlight looks -
http://i.imgur.com/csPGaJ1.png

Error when textarea with first line is blank

With textarea has the first line in break line (line 1 is blank) it not work

Accented word/phrase not highlighted

Trying to highlight cafe (café in spanish)
Updated: with RegEx \\b(café)\\b. Only complete word is requiered to mark only separated word

Additional attribute for Tooltips and multidimensional word list

Thanks for the great plugin! I use it in order to recognize the input of certain words with a list of words from a Database. I would like to expand the highlighted entries with tooltips to describe these Words.

Here is my question:

Where I should start in order to support multidimensional arrays so that I can attach a additional attribute which I can use to explain the highlightet words with tooltips?

Best Regards!

bower package name inconsistency

Hi,

In docs packege is named jquery-highlighttextarea, in bower.json file jQuery-highlightTextarea but in bower package list is listed as jQuery-highlightTextarea-bower and this name has to be used to install it via bower.

Greetings,
Adam

Focus

Hi everybody, i used a input to find a text in textarea and onclick i call the function.... works perfect.

But i think if its possible select the line with contain the value of input text... its possible?

Bad alignment of highlight overlay

on some browsers version (don't know which) the highlight is misplaced

Some words don't get highlighted or the wrong words get highlighted.

Please see www.wordcounter.net/?site=beta and copy/paste the "What is WordCounter" text blurb into the textarea. Then you can click on any "Keyword Density" word and it will try to highlight the words but it doesn't work very well. For example the "words" keyword will only get highlighted 4 times but it occurs at least 7 times.

Executing javascript

if you type <script>alert("hi!")... it will execute the javascript.
This is not safe, isn't it?

IE not synchronizing scroll from input ScrollLeft to Highlight Area in INPUT tags

Hi,

My code is as follows. As simple as this:

(function($) {
  $(document).ready(function() {
    $("#e5")
     .highlightTextarea({
        caseSensitive: false,
        words: ['test']
   });
  });
}(jQuery));

<input id="e5" size="50" value="This is a test and i like it of course because this test is great!"></input>

The outcome is like this:

Then if I move to the right of my input, the highlighter component is expected to move as well but it doesn't.

The inner left css is always 0 for the hightlighter div. Debugging the code I have found that in IE only the function Highlighter.prototype.updateSizePosition in the following section:

        this.$highlighter.css({
            'width': width,
            'height': this.$el.height() + this.$el.scrollTop(),
            'top': -this.$el.scrollTop(),
            'left': -this.$el.scrollLeft()
        });

uses the sentence this.$el.scrollLeft(). This is ALWAYS 0. I haven't found anything on the internet about this issue with IE. Could you please help out?

By te way, I am using jquery-2.1.1.js and I changed the css for the highlighted test as part of my debug to find out the problem. I just removed the color:transparent sentence from .highlightTextarea .highlighter.

Change regex after creation

is there anyway to change regex after creation ?
thx

Text area with absolute positioning

Hi,
When adding the overlay, it is not taken into account that the text area might have absolute positioning.

For example, add the following line to one of the textarea's from the demo pakage:
style="position:fixed;top:180px;left:30px;". The added div is placed in the original position, while the textarea is at the defined positions.

Best regards,
Nicu

Elastic textarea

GREAT plugin! Very glad someone is tackling this.

I'm using Elastic to make the textareas grow automatically as the user types, but when I use highlightTextarea Elastic textareas don't grow. What happens is the textarea takes in more text without showing the vertical scroll bar as it would if Elastic were working, but the textarea doesn't grow and neither does the background div.

What would be best is highlightTextarea could have an elastic method...

Does not work with contenteditable

Excellent library! I like the innovative approach you've taken to solving problems associated with highlighting strings in textareas..

I am attempting to use it in a browser extension like a spell checker. Some external libraries - for example for RTEs - replace textareas with contenteditables. Unfortunately, this library does not seem to work with contenteditable divs. What seems to happen is that the contenteditable div doesn't appear to receive focus, thus text cannot be entered; I'm not sure why.

Any help would be appreciated.

Allow regex objects

The words parameter accept regex stored as strings ONLY (used with RegExp object)
Should also directly accept RegExp object for nicer syntax and choice of flags

words:[
 'string regex', // used with gm or igm flags
  /litteral regex/gm,
  new RegExp('custom string regex', 'm')
]

highlight style drifts on zoomed page

Using the example from the demo, the background highlight drifts to the right with every word present in the box. This makes the styled highlighted area not line up with the text it is highlighting.
I'm using jquery 2.1 and bootstrap 3.1.1. The text area is not inheriting any styles from parent elements.

for example:

   <textarea id="demo-custom" cols="50" rows="3" style="background: none;">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at massa non erat convallis vulputate molestie nec dui. Donec auctor blandit nibh quis luctus. Donec tincidunt auctor consequat.
   </textarea>

    <script>
    $('textarea').highlightTextarea({
        words: ['Lorem ipsum', 'vulputate'],
        id: 'demoCustom'
    });
</script>

<style>
    #demoCustom mark {
        padding:0 3px;
        margin:-1px -4px;
        border-radius:0.5em;
        border:1px solid pink;
    }
</style>

Highlight based on position

I've thrown together a badly coded modification to this with optional parameters to highlight a text range from one character index to another instead of highlighting given words. In our case we want to highlight characters that are past the end of an allowed length instead of just preventing text entry at a maximum length.

Let me know if anyone needs a copy. No idea what the licensing rules are with this since I'm new to github.

Highlighted Word Click Event

Hi,
It is possible to trigger the Click event on a Highlighted word?

Thanks

"input" event not supported in IE<9

Hi,

The "input" event being used to bind highlight() to the textarea does not work in IE8. I was able to remedy this by using the "keyup" and "blur" events instead.

Best,
Mike

Live update option.

How do you update the textarea after the word list has changed?

For example if I match 'code' it will highlight this, after editing 'code' to 'cord' it will still highlight 'cord' .

Highlight first matched word

Hi,
Will be possible to have the possibility to just highlight the first word that match, and was not already highlight? Will be great if someone can help me with that.
Thanks

highlight with wrong position

I try to highlight some words in text as below, the range set up as [87,100], the expected highlight words should be 'Bestellnummer' but its actual highlight word is "llnummer:#12" . any idea? is it because of space and return characters?

 Meine Bestellungen
  |    Mein Konto
  |    Amazon.de

 Versandbestätigung
Bestellnummer: #123123123123

Using the plugin causes text to be duplicated

The code is

<body>
<center>
<textarea id="textarea1" rows="1" cols="100" style="resize:none">sample text </textarea><br>

<script>
    $('textarea').highlightTextarea({words: ['sample']});
</script>
<button onclick="searchf1()">button</buttton>
<button onclick="align()">align</buttton>
</center>

Update the list of ranges as the program runs?

So basically, I want to add to the ranges of words to be highlighted as the program executes. I'll be using an array to contain the args, and that seems to be working perfectly. However, the highlighted text doesn't update when you call it again with the updated list of arguments. Is there a way to have the list of ranges to be highlighted update?

var args = new Array();
args.push({ color: '#c1f5b0', start: 0, length: 5 })

$('#demo9').highlightTextarea({
      ranges: args    
});

//At this point, only (0, 5) should be highlighted.

args.push({ color: '#c1f5b0', start: 6, length: 5 })

$('#demo9').highlightTextarea({
      ranges: args     
});

//At this point, both (0, 5) and (6,11) should be highlighted. But only (0, 5) remains highlighted.

Conflict with text-rendering CSS attribute

Hi! I ran into two issues that I wanted to let you know about. Not sure if they warrant fixes in the source but I'll leave them here for your consideration.

The first is that the tag has styling applied by Bootstrap, which is used heavily enough these days that it seems worth keeping in mind. It adds padding of 0.2em, so the fix is to just specify padding of 0 in your to override it.

.highlightTextarea mark {
  line-height:inherit;
  color:transparent;
  padding: 0;
}

Easy! The other is a conflict with the text-rendering property. In my case, it was applied to the body, so the highlight div got it, but my textarea didn't. The solution was to add this class to the textarea.

.highlightTextarea textarea {
  text-rendering: optimizeLegibility;
}

Again, not sure if this was your problem, but thought you'd might like to know!

The end! Thanks for your work on this!

highlight doesn't work for dynamically changing arrays of words (bug)

an odd issue here. we're using your plug-in to highlight matches in an input test string as a result of a regular expression that the user builds.

the subsequent matches are parsed into the same format that your plugin requires (an array of words in quotes, separated by commas). However when implemented, the highlight div and class mark are applied with a width of zero pixels in between each letter of the matches. The plugin is clearly finding the matches, but the highlight application seems to be bugging out.

thoughts?

highlight only word

Good plugin.
I want to ask if there is a way to highlight only the words in the text and not part of a word.
example:
text: "I want to highlight string no substring"
word: "string"
result: "I want to highlight STRING no substring"

Thank you!

jquery-highlighttextarea and malihu-custom-scrollbar-plugin

I am trying to use malihu-custom-scrollbar-plugin with jquery-highlighttextarea, but it is not working.
Did you try something like this?

Thanks!

Is there anyway to tell it to highlight words without matching the word within a word?

If I want to highlight tree but not the tree in trees, how would I do that? I tried \btree\b but that didn't highlight anything.

Double click on Safari on mac?

Double click doesn't work as expected, can't select word with double click in textarea. In some cases it is possible to select word but response is little bit slow and sometimes it isn't possible at all. Any help for this? Also on Safari on Win works fine, also on other browsers work fine.

Do not work well on IE

Do not work well on IE . The highlight and textarea do not overlap properly. Once added text area become non editable.

Backspace and delete are not working on textArea in IE

Friends

Im using the highlighTextarea , however the backspace and delete keys are not working on a textArea in IE. This works well on chrome.
Should I use keyCode values ?

Bug on highlight line

Hello, I have a PHP script who reads and compares the differences between two files.
I put the highlighting all line numbers where the line of my two textareas is not equal. A PHP function compares all lines and returns a string with the regular expression of variable "words" for it highlighting. The html code display is : "words: ['\n830 |\n833 |\n838 |\n847 |\n848 |\n849 |\n850 ');"

All lines of my textarea who start by 830, 833, 838, 847, ... should be highlighted.
However on some textarea I have, for example, the line 839 highlighted while the 838 line it's not

Please help me ?

Updating highlighted phrases if the TEXTAREA's value is dynamically updated

Hey there,

we're going to use the jQuery-highlightTextarea for the TEXTAREA field, which is updated from an IFRAME that way:

parent.document.getElementById('content').value='{$contentJs}';

Both TEXTAREA and IFRAME appear in the same window.

Updating itself works. However, after that, the text is not updated with the new highlighting area; in general, some of the highlighting should be removed, but it still takes place.

Is there a simple way to re-fresh the points of highlighting, when calling the function mentioned above?

Hopefully I've explained that clear... :) If not, I could drop a screenshot of what I mean.

Thanks in advance.

Problem width and height in %

Hi Man,

First of all, thanks for your work.

I'm trying to use your plugin into my textarea that has your's width and height in a css file in percents.

When the plugin acts on it , the textarea lost your's height...

Any idea?

Highlighting words in the text are using multiple colors

Is there a way to highlight 2 sets of arrays using different colors. Right now you cannot use multiple colors on the same text area on different set of words

Highlights are offset incorrectly on zoom

Hello,
Highlighting words in my text area works fine when the zoom level is set to 100%. However, if I try doing the same thing while zoomed in, the correct words are not highlighted, because the highlights seem to be offset incorrectly when the zoom level is not 100%. Is there any fix to this problem? I noticed this on the website (http://mistic100.github.io/jquery-highlighttextarea/) as well; if you zoom in at 125%, reload, and look at the first text area example, you should see that the highlights are offset.

"on click" event example

Hi!

Due to the closed ticket #42 here a new (open) question:

I do not get to run the "on click" event example. I have tried:

...
<textarea cols="50" rows="6">Lorem ipsum dolor sit amet.</textarea>

<script>

$('textarea').highlightTextarea({
  words: ['Lorem ipsum'],
});

if(jQuery().highlightTextarea) {
  console.log('Highlight Textarea ready....');
  $('.highlightTextarea').on('click', 'mark', function() {
    console.log('Highlight Textarea on click');
  });
}

</script>
...

I am grateful for any help ...

..Thanks

It causes mistakes/markes wrong words when height is more then 400px

hi, last week I wanted to use highttextarea-2.0 in order to change background-color for one or more searched words in a language file,I set my width on 1000 px and my height on 800px, cause the language file is more then 2300 lines long. Then I recognized, that only in the first ~ 8 lines the correct words where colored, afterwards there where colored different words, that have nothin in common with my searched word and furthermore empty spaces also. More or less by random, I found out, that this mistake depends on height of textarea. I changed it into 400px and now it works very well. perhaps you have the possibility to fix this little bug( I saw some other posting with problems with width and height), just wanna let you know about this little trouble :)
greetings
anja

Using with jqueryautosize

I am trying to use your highlightTextarea with another jqueryplugin called "jqueryautosize" which dynamically autosizes the height based on the content in the textarea.

I know highlightTextarea is a bit picky about specifying height and I'm having some issues with incorrect highlighting positions when using both plugins together. I think it has to do with the scrollbar either appearing or not based on what is in the textbox. Do you have any suggestions on how I might get around this issue?

Thanks again for a great plugin. It really helps me.