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.
Related
Hey guys I am working on an application and so far its going well but while working on a recent features i am a little stuck.
Here is my problem:
using java script I am getting continuous user speech input and transcribing it. While I am getting this speech input i want to be able to identify and highlight the text on the screen that is being read. I want to highlight mistakes (words spoken that don't match) and I want to highlight all the content that is going correct.
I am not asking for someone to code this for me, i just want to be pointed in the right direction.
A similar implementation you have probably seen is in online typing games. where you try to type parts of a passage as fast as possible and it highlights the ones you are getting right and the ones that you are getting wrong.
Any help is appreciates, libraries, algorithms, methods, or terms I should search. Thank you !
Are you indexing the text at all? Do you know the text in advance? If you created an in memory graph database using each word in the text, you could search edges to find 'weighted' hits. It's ambitious, but there's an article here:
https://graphaware.com/neo4j/2016/07/07/mining-and-searching-text-with-graph-databases.html
If you want to go dirt simple and follow your typing game analogy:
In the typing game an event is fired each input (keypress).
The key pressed is compared to the expected one.
If it is not correct it is flagged as wrong.
There is usually no way to go back and correct the mistakes.
The user has to type the next expected letter correctly to
get things rolling correctly again.
You could do the same thing.
Underline the next expected word.
Each word (whitespace) is an event.
Match the text to speech word to the expected word.
If it is not right, flag it as wrong, strike it out.
The user has to say the next underlined word correctly to start things going smoothly again.
You could allow the user to back space the expected word so he/she could start over where they wanted to.
This will have some hiccups, as all things speech to text do, but it will work like your typing game and be simple to implement.
I am stuck on one problem that I hardly can describe that easily.
I fetch JSON data from an RESTful API that contains several objects which are then placed as text inside a Textarea field, so it can be edited. After the edit is done, a button is clicked and then that string is saved somewhere else in the DB.
So far so good.
Problem comes in the scenario when an user edits that text in the Textarea field and then triggers the API again (answers another questions from the form on the same website), so that fetches another data into that Textarea, but the edited data should be present as well.
E.g. First time there are 2 sentences inserted inside the Textarea:
The car is painted red. The car has 4 wheels.
So then the user changes the first answer in the form, so the Textarea looks like this:
The car is painted blue. The car has 4 wheels.
I got that figured out with the Javascript replace() function, just find the sentence "The car is painted red." and replace it with the "The car is painted blue."
document.getElementById("myTextarea").value = journalTextareaString.replace(tempPreviousAnswer,tempChangedAnswer);
If the text is edited like before/after the sentence, the sentence is replaced normally with the new one, all the added text from the user stays. For example the user has manually inputed some extra text:
I love my car. The car is painted red. The car is nice. The car has 4
wheels.
Now if he switches the car to color blue on the form, the manually edited text stays and only the sentence with the color is changed:
I love my car. The car is painted blue. The car is nice. The car has 4
wheels.
But how do I do it when a user has edited the text from inside the sentence, for example he puts a word "chrome" in between the sentence, like:
The car is painted chrome red. The car has 4 wheels.
Thanks.
The tough thing here is you are appending the text together. Keep them in different boxes. This makes it next to Impossible to differentiate the different fields. Separate them. This makes it possible for you to roll back and also tell the difference about what was edited.
What you want to do is merging the text of a remote party and a local party. This is a complex thing do do, and there is not a simple solution. Please let my explain why..
Example scenario
Lets take for example user (B) "Bob" and user (A) "Allan". They are going to work on a document (or in your case just a string) in collaboration. There is a version 1, that they both start working on, and in the meantime you will have A and B make changes, so you get version 2 from user A. Lets call it A2, and version B from user 2, version B2.
The problem of conflicts
First of all, you should make sure that both these users came from version 1. So you should keep track of versions. Then, an even more complicated problem has to be solved: merge conflicts. Take for example this image:
You are going to have to decide how this conflict is resolved. Is A always going to overrule B? Wich one is overruling wich one? Or are you going to just randomly put the edits of user A and B on the same position in the text together after eachother? How are you going to handle word-spacing, deletions, additions, updates?
See how this is going to cause you alot to think about?
Solution?
You should offer your user a way to resolve their conflicts (keep mine, keep theirs, or interactively show the conflicts), whenever you are going to run into trouble
Use resource-locking
Another solution is to avoid collaboration alltogether: Lock your data (make it temporarily read-only for everyone but 1 person), so that never-ever 2 people can be editing your data at the same time.
See also
This problem is very well known by people that used "version control systems" such as GIT, SCM and SVN. Heres how one merge application helps programmers to solve their merge-conflicts:
Using Javascript, I need to allow a user to double click a word on a page and retrieve the sentence that it appears in. Not just any sentence, but that specific one. I've toyed with retrieving all sentences that that word appears in and somehow choosing the correct sentence, so maybe that's an option.
I've scoured the web looking for this beast, and I've thought a lot about it. Some have recommended using Rangy but I haven't been able to find the functionality I'm looking for, or even functionality that would help me get where I need to be.
Any ideas?
You could turn your page into one or multiple read-only textareas, use clever CSS styling to mask it, then use the onselect event as described here: Detect selected text in a text area with javascript
Depends of course, how your page looks like and where it's used.
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 :) .
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! :)