lonekorean / highlight-within-textarea Goto Github PK

I reproduced the bug here: https://jsfiddle.net/5pm2ktwh/

Check out the attached screenshot to see how it looks on Firefox 85 on Windows 10. In Blink-based browsers it looks as expected.

Hey :)

Can the plugin be used with an array of regular expressions? I tried and it doesn't seem to work.. Not sure if I'm doing something wrong.

Hey,

Great project, however, I'm having some issues, I seem to be one character out when highlighting...

Do you know what might cause it? Basically, highlighting Peru would highlight 'eru '

<script> $(document).load(function () { $('.string-example').highlightWithinTextarea('Acc'); }); </script>
This is done via scripting... the search term word to be hightlighted is: 'Acc'
How do I enter a search term to be highlighted via a USER PROMPT Input box ?
Please Assist.
Thank You.

Hello everyone, how can I mark a whole line? Let's say I'm looking for "Hello" in a line. now I would like to have marked not only Hello, but the whole line. How does it work ?

When Scroll Horizontally Scrolled Section is not Highlighted:

Only First-Visible Section is Highlighted:

For some sites, jQuery is too big a dependency.

Step 1: align hwt-content the same as the textarea exactly
Step 2: make the textarea font color transparent
Step 3: style hwt-content as you would have the textarea

I ams using angular model to post the form, the value is clear but the highlight remain on the textarea.

how can I clear it, I clear the value using:

$('#content').value('');

But the textarea is highlighted.

i am using lonekorean/highlight-within-textarea in my laravel project
var dummystr=' '; // gobal varible created in my javascript file
and in
function onInput(input) {
// do stuff, return something
return dummystr;
}
but when i return this gobal varible using this that time it gives
uncaught exception: Unrecognized payload type returned from onInput callback.
such exception ...
how to solve this one
rpl fast

By text boxes I mean <input type="text">. It is not clear if these are intended to be supported by this plugin. However, it appears to work perfectly fine until the text box gets full and the text within starts to scroll.

This jsfiddle illustrates the issue.

I tested this in FF 52.8.0 and Chrome 66.0.3359.
When the issue occurs FF prints the following warning to the console:

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

$('.simpleditor').highlightWithinTextarea({ highlight: '#' })

i try to adjustment the width of the textarea to solve this error, but I failed.

How can I go about highlighting with Thin Space? I have a checkbox that switches from a normal space to a half space. Once the switch occurs the highlighting disappears. I have tried with a Regex, but maybe I'm doing it incorrectly.

CharCode: \u2009
HTML CharCode:  

Would it be possible to scroll textarea to the subsequent highlights, e.g. on a press on a button? I'd like to implement RegEx search within a (long, multiline) textarea, and this will highlight the results nicely, but the user would need to jump at will between the results found - just like in a regular text find on a webpage...
How could this be achieved?

I am trying to use this to highlight certain words on WordPress' "Edit Post" screen. So far, all it does is move the text down by one line, and doesn't highlight anything. Any tips? Could it be because the textarea is sized dynamically?

Issue: When I search the container did not adjust the position and also search the backdrop container text.
Help Needed:
Can we adjust or scroll the position of container while searching
can we ignore backdrop container text.

<script>
$(document).load(function () {
    $('.string-example').highlightWithinTextarea('update');
});
</script>
<script>
    $('.string-example').highlightWithinTextarea({
        highlight: ['patel']
    });
</script>

I have a webb app where the user searches and then the search words get highlighted in the textarea. on most content of the textarea it works but on this instance and others it seems to get missaligned. the code is the same on each the only thing that is different is the content of the textareas.

I noticed on a similar issue the answer was to run the update function that made it slightly better but still has the occasional case where it throws it out. And then as the user scrolls down the text area the highlight follows.

Is there a reason this is happening?

Please help.

In

highlight: 'title',
className: 'red'

I tried adding a /\btitle\b/g but it's not working and I'm not sure how to customize the library.

How can I add a word boundary for title so that it won't highlight "subtitle" or any other word with "title" in it?

Hello,

I noticed that when a dynamically change the highlighted words, the focus in the textarea always jump back to the begining of it.
I have a set of ranges, on a long text.
highlight: [ { highlight: otheIndex, className: 'yellow' }, { highlight: currenIndex, className: 'blue' } ]

I click a button to change the range of the "currentIndex" changes but the focus of the textarea jump to the beginning. I would expect that the focus stay where the user is looking.

Could you advice?

When I run this the highlighting continues for an extra half a character. It is most noticeable when I have several highlighted words in the same line because after say, four, highlighted words the highlighting of the fifth word begins two characters late and ends two and a half characters into the next word. It's possible that I'm doing something wrong but I was curious if anyone else has seen this.

I am using bootstrap v3.3.7 for an Electron app, and when I try
use this plugin it does two things.

1. Modifies the text area (removing the styling that comes with bootstrap and squishes it to two lines
2. Puts the marked up text above the text area

Before highlighting...

After highlighting...

You can see the project I am trying to add this in at https://github.com/adueck/journee-diary

html before running the plugin:

<div class="col-md-7 full-height">
          <textarea class="form-control" id="textArea" autofocus dir="auto"></textarea>
          <p>
            <span class="glyphicon glyphicon-cog bottom-icon" aria-hidden="true" onclick="$('#settingsModal').modal('show');"></span>
            <span class="glyphicon glyphicon-question-sign bottom-icon" aria-hidden="true" onclick="$('#helpModal').modal('show');"></span>
            <span id="below-text" style="text-align: right; float: right; font-style: italic; color: grey;"></span>
          </p>
</div>

Hello.
Whether development of similar for Emoji is planned?
As in case of use of this plug-in, others (for example: https://github.com/mervick/emojionearea) will normally not work.

check this screen record: when entered enough letters, the line break will happen right after the highlighted word which is not the same behavior as a textarea

I'm using this package in typescript project so I created some typescript definitions. I'm not quite sure how they all fit together, but this is what I added to my project to get typescript to compile it and work.

/// <reference types="jquery" />

interface JQuery<TElement = HTMLElement> extends Iterable<TElement> {
    highlightWithinTextarea(arg0: { highlight: { highlight: () => RegExp; className: string; }[]; });
    highlightWithinTextarea(arg0: string);
}
```

Hi,

The payload is currently triggered every time the input changes. I'd like to call a remote webservice, thus it will be preferable to trigger when the user decides it, for example by clicking on a button.

What do you think?

Thank you.

Do you have any clou how to implement the simultaneous scrolling in vue?

This is my component

when i type some hashtags everything is fine:

but whern i scroll...:

what's wrong with my handleScroll() function ?

Highlight like a normal text editor does.

This might be achieved by hiding the textarea and showing the fake layer.

I was trying to do some magik with this plugin but I can't figure out why it is putting the backdrop ABOVE the textarea (destroying the illusion of colored text)
Code

This package is awesome. However I want to apply it on my ReactJs project but I don't know how.
So do we have ReactJs version for that?

I can't get the word to be case sensitive and I can't see any of the demos showing case sensitive working. Any help or suggestions?

what is the minimum required version of jquery?

Thanks

edit: tried it with v 1.11.1 so I guess it's pretty low

Hey,

I have the following code:

<script>
counter = function() {
  if ($(this).next('div.result').length) {
    $(this).next('div.result').remove();
  }
  var output = '<div class="result">Words: <span class="wordCount">0</span><br/> Total Characters (including trails): <span class="totalChars">0</span><br/> Characters (excluding trails): <span class="charCount">0</span><br/> Characters (excluding all spaces): <span class="charCountNoSpace">0</span></div>';

  $(this).after(output);
  var value = $(this).val();
  if (value.length == 0) {
    $(this).next('div.result').find('.wordCount').html(0);
    $(this).next('div.result').find('.totalChars').html(0);
    $(this).next('div.result').find('.charCount').html(0);
    $(this).next('div.result').find('.charCountNoSpace').html(0);
    return;
  }
  var regex = /\s+/gi;
  var wordCount = value.trim().replace(regex, ' ').split(' ').length;
  var totalChars = value.length;
  var charCount = value.trim().length;
  var charCountNoSpace = value.replace(regex, '').length;
  $(this).next('div.result').find('.wordCount').html(wordCount);
  $(this).next('div.result').find('.totalChars').html(totalChars);
  $(this).next('div.result').find('.charCount').html(charCount);
  $(this).next('div.result').find('.charCountNoSpace').html(charCountNoSpace);
};
$(document).ready(function() {
  $('#count').click(counter);
  $('.text').on('change keyup focusout blur', counter);

});
</script>

Basically, it counts the words on the page - this inserted below the textarea. However, the problem is it seems to miss-align the highlighting. See the following image:

Any idea on how to fix this?

Is it possible to use this plugin with a div with contenteditable="true" or with summernote editor

look at https://codepen.io/exzant/pen/NvLJzm

When typing in a textarea and hitting a new line and then typing some text again you get the text rendered by the library displayed in the same line and the text from the input field rendered on the next line. Keep in mind what you're seeing here is a transparent textarea so that the highlighted portion is supposed to be exactly matched on top of the textarea text.

I'd like to open a PR to replace the \n with a
tag

This is the fix I have in mind

Can you share with me some demo how can i interage this lib into react js project.

Is there a toggle or remove specific highlight?

When the highlighting is applied the textarea scrolls to top. Is it possible to prevent it from scrolling?

hi,

i have a textarea with a long long text.
Is there a function that after the highlighting direct scroll to the first word that he found?

Thanks in advance.
Kurt

The Ranges for regular expression makes an infinite loop while trying to use wildcard regex (.*)

Hey,

Do you know how I can get this to work alongside tinyMCE (https://www.tinymce.com/download/)?

Thanks for the great plugin, it's perfect for my app! This is probably a pretty newb question, so apologies in advance.

My textarea accepts HTML markup, so the duplicated div behind the textarea was actually rendering images instead of the markup for those images.

Right now I only need to worry about figure, figcaption, and img tags, so I'm escaping that HTML below line 133 in highlight-within-textarea.js

//this escapes figure and img tags in the input
input = input.replace(/&/, '&')
    .replace(/<figure>/, '&lt;figure&rt;')
    .replace(/<figcaption>/, '&lt;figcaption&rt;')
    .replace(/<img/, '&lt;img');

This works fine for now, but I actually allow more HTML than that in this textarea and writing replace() for each tag will get cumbersome. Is there a way I can escape all of the HTML except the <mark> tags?

Selam thanks for the extension it was really helpful for my project: muqattacounter.github.io but I have issues with Safari it has renders JavaScript differently so that unified letter لا (LamElif) which consists from two letters ل+ا (Lam + Elif) highlighted twice in one at true position one at next character's position(false):

Because of this sliding all the next highlights becomes increasingly more false(more slided) as new لا unified letters comes in at next characters... And end result is this:

Firefox can separately highlight this two letters from middle(which is desired):

How can I do that like in the case of firefox at all browsers?