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
Related
I am trying to draw text along a curve on html5 canvas. To do this, I need to break up input text into constituent characters which can individually be rotated and translated etc. The breaking up of text is easy for English. Given input string s, s[i] gives the ith character. But this does not work for non-english strings. I have a jsfiddle here illustrating the problem: http://jsfiddle.net/c6HV8/. Note that the fiddle appears differently in Chrome and IE at time of this writing. To see what the problem is, consider you have non-english text in a string s. Create a text node to which you pass s. Next, create a text node for each s[i] and display the text nodes adjacent to each other. Now compare the results. They are not the same. How can I break up non-english text into constituent characters in javascript, so that the two results are the same?
भाईसाब :) So as I'm sure you already know, the problem is that fillText and createText both work on the entire string and so it is able to evaluate the string along with all the diacritic marks (combining characters). However, when you call fillText and createText per character, none of the diacritics appear along with the characters they are supposed to be attached to. Hence they are evaluated and drawn individually, which is why you see the diacritic along with the dotted circle (kind of a place holder that says: put a character here).
There is no easy way to do this, really. Your algorithm would basically have to be like this:
Look up the current character from the string.
Find all successive characters that are diacritics and then combine all of them into a new string.
Render that string using fillText.
You can check out the results here on a forked version of your fiddle. I modified the sample text to add some more complex characters just to make sure that the algorithm works properly. The code could definitely be cleaned up; I just did it as a proof-of-concept.
The hard part is coming up with a list of code-points for diacritics for all languages if you want to internationalize this. This answer provides a list that should help you get started.
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
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.
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.
Is there a way to select the first letter of each word with either javascript or jQuery?
Im trying to make tags on my page have the first letter of each word be a bigger font size. Im assuming it involves regular expressions but all i keep finding are things for form validation. I also see a bunch of stuff for capitalizing the first word. I'm trying to change the font size.
Does anyone know if this can be done and how? Thanks.
If you are just looking for a styling change, you might be able to get away with pure CSS using :first-letter.
Here's an example: http://jsfiddle.net/bgNP3/1/
Note: I apparently had to make the spans into inline-blocks for the effect to work.
Update fixed link to jsfiddle.
You could try using:
letteringjs its may be a little more complex than what you need tho, or
you could use this Is there any clean CSS method to make each
letter in a word a different color?