javascript - How to color specific character(s) in textarea -


i making program search characters in desired <textarea>. need color specific character found in text area. how can color character(s) in <textarea>? example, if enter 'a' in input field 'a's in <textarea> should colored red.....

html

<form method="post" name="searching" onsubmit="return check(this)">     <table border="0" cellpadding="10px" align="center">         <tr><td width="114">                 <label><b>text</b></label></td>                 <td width="287">                 <textarea name="para" cols="30" rows="10"></textarea>             </td>         </tr>         <tr>             <td>                 <label><b>alphabet</b></label>             </td>             <td><input type="text" name="character" title="enter character">         </tr>         <tr>             <td colspan="2" align="center">                 <input id="btn" type="submit" name="submit" value="search">             </td>         </tr>     </table> </form> 

js

<script language="javascript">     function check(form)     {         if(form.para.value==""){             alert("no text available search!!");             return false;         }         if(form.character.value=="")         {             alert("search keyword not enter!!");             return false;         }         para=new array();         index=new array();         keyword=form.character.value;         para=form.para.value;         found=0;         k=0;         for(i=0; i<para.length;i++)         {             if(keyword==para[i]){                 found+=1;                 $(document).ready(function(e) {                     $("textarea:eq(i)").css("color","#ff0000");                 });                 index[k++]=i;             }         }         if(found!=0){             alert(found+" times "+keyword+" in text");             alert("index of alphabet: "+index);             return false;         }         else{             alert("not found in text!!");             return false;         }     } </script> 

i'm looking solution, in css, html, js (or jquery). thanks.

as @mohamed-yousef said in comment, don't think can put tags or styles inside <textarea>.

an alternative use user-editable <div>. this, can put additional tags styles js.

for example:

<div contenteditable="true"> <!-- editable textarea, without of default styles , functions -->      text in highlight letters.  </div> 

with this, if search "e", can make js script add styled elements around "e"s, <div> (textarea) this:

<div contenteditable="true">      t<span style="background-color: yellow">e</span>xt in highlight l<span style="background-color: yellow">e</span>tt<span style="background-color: yellow">e</span>rs.  </div> 

try this example (which turned out well, i'm surprised).


Comments

Popular posts from this blog

javascript - Slick Slider width recalculation -

jsf - PrimeFaces Datatable - What is f:facet actually doing? -

angular2 services - Angular 2 RC 4 Http post not firing -