How to expand specific text inside container maintaining the highlight - javascript

I've a chrome extension that highlights the specific text in Wikipedia, now, I want to join multiple highlighted words together so they form long sequence of highlight, the highlighted words in a specific container can be anywhere, so I just went through some previous posts and used the Range concept, but it returns wrong index as you all know. For example
<p>Hello</br>Text</p>
now if you try to find the range atFirstIndex of "Text", it will return 0, however it should return 5 as the beginning is at 5th index but definitely the "range" counts the inner nodes.
I am stuck in this issue as I need to get the correct index, no matter how many inner nodes are there in a paragraph on Wikipedia, I would like to expand the highlighter to those words as well.
if anyone have idea, do help.
I tried all basic solutions, yet no solution, if someone knows how to solve that issue.

Related

Javascript read time word count textarea

This question is based on Trouble getting real time word count from html textbox.
I am also fairly new to Javascript, and would please like some help in understanding the examples presented on this page. There are multiple lines in the code, in the different examples that have a "text area" tag, yet there is only one text area on the screen. Is this correct?
What I am looking to do is to have multiple text areas on the page, all of which will feed into another page via a form (this part I understand). But, I only want one of the boxes to have the real time word count.
Can someone please assist? Thanks.

Find and scroll to (or highlight) some text on page

I want to find text on page and scroll to it. Eg finds the first word of the match and injects hidden element next to it with the purpose of scrolling to that point.
Here's the problem: text might span multiple paragraphs, and some words of the "needle" text might be represented by links, headers, etc.
Not sure how to start tackling this, any ideas?
https://github.com/afeld/bootstrap-toc/blob/gh-pages/dist/bootstrap-toc.js
Might not seem related on first glance but if you dig into how the headings are searched for and selected you might be able to adapt it for your "find text on page" use case.
Creating a hidden element that you can then scroll to is already mostly implemented in this project as well so hopefully you find this useful.

Mentioning system that mimics Facebook's

I've had a horrible problem that I've been wracking my brain for the past two days for, and have yet to come up with a solution. As such, I think this needs someone smarter than I to accomplish.
What I'm trying to build is a textbox that simulates that of Facebook's; essentially, the tagging function.
Now if you've used Facebook, you'll have noticed that Facebook allows you to tag people in a comment/post, simply by typing in their name and selecting from a dropdown list. The name of the person you've selected then appears in highlighted text in that very textarea. I've successfully managed to create and populate the dropdown list a combination of JQuery and AJAX, but the tagging process itself is the stumper.
Once a dropdown item has been selected (by Enter or clicking), the query text will be replaced with the tagged name. Now, it's difficult to see how one can give text in a textarea any kind of a highlight, so I've discovered (by inspecting elements in Google Chrome and deleting the textarea node) that the textarea itself is transparent, and there is a white div below "simulating" the text. Highlighted words are placed in a tag with custom CSS, which gives it that blue background. All of this I've found out myself, and I have successfully simulated this - but I can only do one tag.
Now I've investigated further and found an input type="hidden" element, of class "mentionsHidden". This input element has a value attribute, which dynamically populates itself based on the content of the textarea. So if I typed "ABC", the value of the element becomes "ABC". If I included a tag, say "hi [Rei]!" (where the name in [] is the tag), the value of the element becomes "hi #[member_id:Rei]!".
So I HAVE done my homework. But here comes the part I can't figure out.
I can't figure out how exactly to dynamically populate the hidden input element with the value of the textbox. It's obvious that the underlying div giving the blue tag background is populated from the input element. But the input element is giving me a headache.
You see, I can't do the following:
-I can't simply "copy" the entire value of the current textarea and "paste" it into the input element's value, because that would override any previously tagged people in the input element (after all, the textarea can only possess plaintext).
-Even though I CAN locate the current index of the caret (the flashing black line in the textarea that tells you where you're going to be typing into), that's only for the textarea. Index position 10 in the textarea and in the input element's value might be different things, because this way of "tagging" people will result in adding additional characters to the value String.
-I can't simply do a "replace" of the text I am intending to replace, because there might be other instances of that same text in other parts of the value String.
I know it's a very long and confusing post, but I do hope you get what I mean. I really need a solution and I don't want to use contenteditable, because it's only for HTML5 and some older browsers might not support it.
Yours,
Rei
I hope you were able to come up with, or find, a solution to your problem. Since there doesn't seem to be one here, i'd like to offer one for and anyone who might stumble upon this (as well as you if my assumption was incorrect).
You are going to need to maintain explicit locational data of each existing mention in the textarea in the order in which they appear. If, after a modification of the content in textarea, the position of a mention in it is changed, you will need to determine which appearance of its value, if any, will be used to represent it, and appropriately update the locational data of the mention.
With such a collection of data, it becomes trivial to construct the value of mentionsHidden, though the existence of such data makes the element unnecessary.
Mentionator is an existing, robust solution which takes this approach in providing the functionality you are trying to recreate. Considering it is well-structured, easy to follow, and copiously commented, it should be of use to you as either out-of-the box solution or reference material to cite as you roll out your own. It is maintained by yours truly :) .

javascript jquery search textarea for string

I have a standard html based textarea. That I want to go over the entered text as someone enters it looking for keywords or phrases. So I can catch them if typed and trigger an event accordingly. In this example I want to wrap the particular keywords or phrases in a bracket kind of like bbcode. My issue is I am Some keywords and or phrases are similar, so I don't want the action to fire off multiple times or at the wrong time. Right now the closest thing I can think of thats remotely similar to this is Facebook when you start typing someones name in the status box. There name kind of does an auto complete like thing. This is something I eventually want to expand this out towards but for now I am happy with just catching the keywords and or phrases accordingly and triggering the series of events I want to happen when they are found.
Trying to find a starting point for this. Also I need to fire off another event if the text is removed from the string that is the textarea. Which I think I can rebase off the inital concept I am looking for here.
Now I know what some may think I am not looking for an end solution (unless you have one and want to offer it up). I am mostly looking for logic points in how to approach this from start to finish. But all in all I am just trying to figure out how to specifically iterate over the textarea to find keywords and phrases specifically. I figure everytime someone hits the space key I can have it fire off an event to scan if you will the enter textarea. But doing the scan is the part the confusing part at the moment.
The phrases and keywords are stored in an array also.

Javascript, Text Annotations and Ideas

I am very curious to hear input from others on a problem I've been contemplating for some time now.
Essentially I would like to present a user with a text document and allow him/her to make selections of text and annotate it. Specific to the annotations I aim to achieve the following:
Allow users to make a text selection, annotate it, then save the selection and annotation for reference later
(UI) Support representing overlapped annotations. For example if the string where: "This is the test sentence for my example test sentence", user1 might have an annotation on "is the test sentence for my example" and user2 might have an annotation on "for my example".
Account for a situations where the document's text changes. The annotations would to be updated, if possible.
How would you tackle this from a technical perspective?
Some ideas I've had are:
Use javascript ranges and store an annotation as a pair of integers something like: (document_start_char, document_end_char). Save this pair in the db.
Alternatively, using JS get the text selected and actually save the full text in the db. (not sure how i would then do overlapping annotations)
Represent overlapped annotations by applying a css style to highlight the text then darken the "stack" of annotations where they overlap. Smallest annotation would always have to be on the top of the "stack".
What are your thoughts or areas of improvement? How the heck could i support a document's text being updated without breaking all the annotations?
I'm researching this same question and personally I favor staying away from rolling my own, in favor of an existing open source library like Annotator.
http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html (404 response)
http://mark.koli.ch/2009/09/05/get-selected-text-javascript.html- (404 response)
Getting the selected text is really easy. Storing it (or its starting/ending points) is also a joke. But what about your point number 3? What if the text changes?
If the text changes, both the original text and the original selection coordinates you stored won't equal the current modified text. You should be aware of the annotations present in the text document, so that everytime it changes, the annotations referencing to that particular piece of changed text should be updated, or deleted (maybe after a quick comparison between the before and after text: are some words missing? or just some words have been corrected?), but this seems really a struggling task.
I think storing the entire text annotation in a db is essential, to avoid it being changed and the annotation lost. This way you will still have the complete text you annotated. Then you should also use a sort of flag to indicate the start character of the annotation, and if the text changes, you could calculate the difference in characters from the document text before the change, and the one after it, and find this way the new starting point of the original annotation (assuming the annotation part of the document text has't changed).
Dividing the text document in as many paragraphs as possible should also help, this way you could separate different pieces of the document and work on one by one.
Now I would really like to see it done! :)

Categories

Resources