Tuesday 15 March 2011

javascript - Highlight Text in textarea when a Hashtag typed followed by one or more character -


I want the user to be able to type in the text area if he has typed a hash tag or The more letters they write after the highlight is highlighted as long as they do not touch the space.

It's a matter of fact that I want to get something like Facebook's new hash-tag feature, I have argued coding, but still is not enabled

from this perspective I have tried that the use of junkie has been done as follows:

  & lt; Textarea id = "txtArea" & gt; Here's my # hash & lt; / Textarea & gt; $ ("#TxtArea") Onkeyup (function () {var results = $ ("# txtArea"). Match (/ # [\ w] + / g); // result = '# hash'});   

But I could not finish & amp; I do not know where to go from here, so any solutions, advice, plugins I can use, I would be very grateful.

I believe the word within basic textarea (a single There is no way to highlight highlights as it does not accept markup, you are in the Textera in a small rich text editor, but it seems that is a bit more complicated, maybe I'm an editor at SO You have to go for a similar approach, and there is a preview window below so that you can see what Asserting that you can use something like this, of course you want to change it to work a little in line with your exact requirements. At least this should give you some ideas.

CSS

  #preview {height: 2em; Width: 12 AM; Border-style: solid; Border width: 1px; }. HashSymbol {color: # f90; }   

HTML

  & lt; Textarea id = "userInput" & gt; & Lt; / Textarea & gt; & Lt; Div id = "preview" & gt; & Lt; / Div & gt;   

javascript

  / * jslint maxerr: 50, indent: 4, browser: correct * / (function () {"strict use"; function Walk TheDOM (node, funk); node = node.New sneabing;}} function getTextNodes (element) {var nodes = node, node = node, []; WalkTheDOM (element, function (node) {if (node.nodeType === 3) {nodes.push (node);}}); return nodes;} function asge argex (string) {return string. / [\ [\ [\] () {}? * + \ ^ $ \\. |] / G, "\\ $ & amp;");} function Highlight (element, string, classname) {var nodes = matching text node (element), length = nodes while (i & lt; length) {node = 0}; long, string string = string, rx = new regExp (" \\ B "+ Escape Argex (string), I = 0, index, text, new container, span, node; (I 0, index)); Text = text Salis (index + string long th); Span = document.createElement ("span"); Span.className = SquareName; Span.appendChild (document.createTextNode (string)); NewContent.appendChild (period); Index = text Search (Rx); } NewContent.appendChild (document.createTextNode (text)); Node.parentNode.replaceChild (New Communication, Node); I + = 1; }} Function addEvent (elem, event, fn) {if (eleph = document =} function listenHandler (e) {var ret = fn.apply (empty, argument); if (rate === false) {e.stopPropagation ( ); E.preventDefault ();} return return;} function attached hander () {window.event.target = window.event.srcElement; var ret = fn.call (elem, window.event); if (ret === Incorrect) {window.event.returnValue = false; Window.event.cancelBubble = true;} Return return;} if (elem.addEventListener) {elem.addEventListener (event, hearing, false);} other {elem.attachEvent (" But "+ Event, Attendor")}} function to preview node (node) {while {node first hair} {node.removeChild (node.firstChild);}} High light (E, from) {if (typef === "string") {to = document.getElementById (to);} var value = e.target.value, tag = value. Match (/ \ b # \ w + / G) || [], index = tags.Lamp - 1, lookup = {}, piece, length, tag; while (index> = 0) {tag = tag [index]; If (! Tag. Length || tag) === "#" || Tags charAt (0)! == "#" || lookup [tags]) {tags.splice (index, 1); } And {lookup [tag] = true; } Index - = 1; } Fragment = document. CreateDocumentFragment (); Fragment.appendChild (document.createTextNode (value)); Index = 0; Length = tag. Long; While (index & lt; length) {tag = tag [index]; Highlight (piece, tag, "hash symbol"); Pointer + = 1; } Empty node (copy); To.appendChild (piece); } AddEvent ("userInput", "keyup", function (e) {toPreviewHighlight (e, "Preview");}); } ());  

P >



No comments:

Post a Comment