JavaScript color strings when they appear - javascript

I was wondering if there are any JavaScript functions that I could use to change the font color of certain strings in a text box.
Suppose I created a text box and every time the string hello appeared the font color would change to blue.
Are there any easy ways to make a database of strings so that this event would occur?
thanks!

This is a non-trivial task, as text within a textarea can not be directly formatted. I would look into using a div or some other applicable tag, and use the Content Editable attribute. This way the user can edit the text and you can control the formatting. At the simplest level you can listen for a key press and use regular expressions or the replace method to highlight all the words in your dictionary.
Here's a start, you'll need to flesh it out to perhaps be case-insensitive if that's what you want, and to keep track of the caret position which is a more complicated task:
http://jsfiddle.net/VJQHD/
You can look at a similar issue here: Get caret (cursor) position in contentEditable area containing HTML content

Related

Multiple independent sections in one textarea

I want to make a kind of form that has one big textarea but divided on smallers ones, to put it simple I would like to create something like this:
Section 1
Text text text
--------------
Section 2
text text text
--------------
Section 3
text text text
--------------
etc.
And make it all in one textarea BUT when I click in section 1 area file_1 would load (and I ofc could edit the text in that particular section) and when I click section 2 the file_2 would load (names are just examples).
If it's impossible or really complicated to make what would be best approach to this problem? Keep in mind that there would be at least 20--30 sections and they should be created dynamically.
I was thinking if it is possible to make it in HTML/CSS/Javascript.
You can do that, but I do not really see the point. The way to do it is to always use white space separators and not allow the user to add such separators or remove them. Then, you can get the different sections by split-ing the value of your textarea by the separator and initialize them by loading the file into an array and join-ing it.
But why would you want to overcomplicate your own life this way and to force yourself to implement slow and hacky algorithms? You could use several textarea tags and design them in such a way that they will look like they are a single textarea. The only thing to handle besides that would be to switch the textarea when the user presses down/up arrow for instance in the last/first row of a textarea.

How to simulate an artificial caret in a textarea?

What I am trying to do is something similar to how collaborative editor works. I want to allow two people to edit the same document. And for this I have to simulate an artificial caret. I can extract the other user's activity in term of addition and deletion at specified location in a textarea.
I will then transmit the location, along with the action to the other document. There I need to carry out the required change at the sent coordinate. I have searched and found enough ways to set the caret location and insert or delete text at the current caret location, but the problem is that the caret of the document moves to the location at which I make the change.
I don't want that, I want to have two carets, one each for the two users. Transmit their changes to each other documents and make the changes at their respective locations, while showing two different carets.
I just need to know if there are certain libraries that I can use, or even if I have to make this on my own, then how and where do I start. I don't even know how a textarea is represented within a browser. How can I characterize locations within a textarea, if I know that then I save the locations in memory and make the changes based on the input received.
I hope I make sense, thanks for any help.
have you seen this?
https://github.com/benjamn/kix-standalone/
This is how google docs does it:
https://drive.googleblog.com/2010/05/whats-different-about-new-google-docs.html
You could mimic a caret with a special character and do the regex to insert the partner text and move his caret, and you can use the real one. This is the simplest design I can think.
To get the idead, you could use the pipe | as a artificial caret. but this would easily conflict with user insert a pipe, to avoid this you can use sort of uncommon combination, or find some unicode character to act as a caret.
A real solution but way more complicated is not use a textarea, and use a DIV. this means that you need to handle all the key events and insert the character pressed manually to the document, and register the cursor position. But this way you can insert how many carets you want not just 2, something like this <span class="caret1"></span> you can make it blink, style with css, have diferent color for each caret, etc.
Have you tried Draft.js, from facebook ? https://facebook.github.io/draft-js/
"Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.
Draft.js makes it easy to build any type of rich text input, whether you're just looking to support a few inline text styles or building a complex text editor for composing long-form articles.
In Draft.js, everything is customizable – we provide the building blocks so that you have full control over the user interface."

Color coding certain regex match in a textarea?

Is there any way via JS to highlight text inside a textarea that matches a specific pattern?
I am loathe to use a fully WYSIWYG editor as I just want to highlight certain text (references in scientific writeups, they become very cumbersome to read over).
textarea can not support different colors. So your answer is you can not do it in a textarea.
Take a look at this article: Javascript - Change font color of certain text in textarea
Summarized, you cannot add tags inside of a textarea, so you cannot modify the font/style of text contained within it.

Detect text hover with JavaScript/jQuery, while ignoring the div...?

Is there a way in which I can detect when specifically text is being hovered over, rather than the entire div/span?
You can use the event.target that triggered the hover over event, assuming you have access to the event object.
EDIT:
This is overkill, but can be fun:
When you hover over a span/div, you can split all the text in it and wrap each character with span tags that serve LITERALLY no other purpose other than to tell you which word or letter has been hovered over.
I can't see any useful reason to do this, but if you have such a desire, then this is a temporary and relatively quick (text-length depending) way to determine which letter or letters someone is hovering over in a set of text.
I did this for another project where the desire was to trigger a way to do translations of certain specific words in a 'very' length text document so that people learning a language could save words for later translation - if this is close to your context, then this might work, otherwise, please explain more.

How to add a string to a text area with different colours?

I am trying to work out how to write a function where I pass in a string and this string is added to a textarea. This I can do, but I want to parse that string and change the colour on different parts of the string.
In other words, find the words "select", "where" and turn them blue. Then find the words "AND", "OR", "<" and turn them grey and anything in between two single quotes to be the colour red.
I am hoping for a simple function rather than using syntax highlighting libraries, I am not even sure they will work with strings that are dynamically generated.
How can I do this? I am able to make use of JQuery if this makes things easier?
Thanks all
text inside <textarea> elements is plain text only, meaning that it cannot be styled. what you can do is create a div with contenteditable and work with that, check this link out for a reference: http://www.west-wind.com/Weblog/posts/778165.aspx

Categories