I am making a program to search for characters in the desired </code>. I need to color the specific character that i found in text area. How can I colo <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5408099190056760" data-ad-slot="7305827575" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="fly-panel detail-box" id="flyReply"> <fieldset class="layui-elem-field layui-field-title" style="text-align: center;"> <legend>3条回答</legend> </fieldset> <ul class="jieda" id="jieda"> <li data-id="111" class="jieda-daan"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href=""> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000010.jpg" alt=" 慢半拍i "> </a> <div class="fly-detail-user"> <a href="" class="fly-link"> <cite> 慢半拍i</cite> </a> <span>(楼主)</span> </div> <div class="detail-hits"> <span>2021-01-20 19:22</span> </div> </div> <div class="detail-body jieda-body photos"> <p> <p>You can't change it in a <code>textarea</code> because <code>textarea</code> only contains pure text, to add format to words yo ufound you need to surround these matched words within html elements, so this why it won't work, as in this JSFiddle, just another way of doing it, you can search for <em>multiple words</em> if you separate them by a space in the search box like <code>item1 item item3</code>:</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var div = $('#text'), kw,keywords, i, j; $('#btn').on('click', function (event) { event.preventDefault(); console.clear(); kw = $('#keywords').val(); keywords = kw.split(" "); text = div.text(); text = text.replace(/,|\.|\?/i, ""); text = text.split(" "); for (i = 0; i < text.length; i++) { for (j = 0; j < keywords.length; j++) { if (text[i] == keywords[j]) { text[i] = '<span class="hl">' + text[i] + '</span>'; } } } text = text.join(" "); div.html(text); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>div { width:400px; height:250px; display:block; overflow:hidden; border:lightgrey 2px inset; padding:1px; overflow:hidden; overflow-y:scroll; } .hl{ background-color:orange; padding:2px 3px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <form name="form"> <input id="keywords" type="text" value=""> <input id="btn" type="submit" value="Search"> <div id="text" contentEditable=true>Skinny grinder, redeye whipped, cream aftertaste, aroma white sit brewed fair trade froth. At, aroma, caffeine as, cream shop chicory, wings kopi-luwak espresso cream lungo. Siphon pumpkin spice ut plunger pot americano single shot robusta kopi-luwak. So, half and half mug instant frappuccino, trifecta caramelization mazagran sit black. Sit americano cup, blue mountain coffee, blue mountain, breve cinnamon instant grounds cappuccino. Espresso plunger pot trifecta, redeye sit, qui ristretto bar caramelization turkish carajillo. Qui caramelization pumpkin spice crema skinny frappuccino sit turkish. Dark affogato, filter americano est mocha cream frappuccino. Ut qui, arabica froth affogato shop, fair trade cultivar espresso kopi-luwak black. Cortado, instant crema flavour saucer mocha brewed. Single shot extra, est frappuccino half and half, fair trade qui acerbic lungo cappuccino grounds beans. Flavour irish kopi-luwak decaffeinated eu cream dripper cultivar cup cappuccino. Dripper, americano that latte sit skinny in percolator coffee coffee half and half. Extraction wings cultivar roast, whipped french press arabica affogato dripper coffee. Crema to go, coffee cortado breve americano eu viennese. Redeye affogato, seasonal that medium roast viennese. That at dripper, robusta frappuccino crema filter ut seasonal latte. Breve, qui con panna, saucer cinnamon flavour caramelization foam decaffeinated galão con panna. In medium coffee est trifecta shop at chicory acerbic rich aged. Cultivar mug white decaffeinated crema affogato, brewed caramelization beans blue mountain mocha. Skinny, seasonal sweet, arabica caramelization wings carajillo rich. Flavour et shop aged at, caramelization trifecta instant a steamed. As, irish seasonal steamed instant espresso frappuccino. Affogato barista aroma dripper macchiato siphon skinny cup strong. Kopi-luwak white spoon mazagran sugar so café au lait. Sugar blue mountain mug siphon wings cup roast affogato. White black café au lait frappuccino body, white flavour strong americano grounds sit kopi-luwak. Turkish, mocha, bar seasonal mug ut skinny. Beans mug percolator espresso caffeine filter caramelization. Black barista percolator aftertaste, saucer frappuccino french press body white. Medium id wings grounds americano crema roast. Dripper, frappuccino mocha est robusta, sit est milk medium body caramelization doppio.</div> </form></code></pre> </div> </div> </p> </p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='1804945'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="1804945"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> <div class="noreplaytext bb"> <center><div> <a href="https://www.e-learn.cn/qa/q-818225.html"> 查看其它3个回答 </a> </div></center> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_1804945"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="1804945">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' /> 加载中... </li> </ul> </div> </li> </ul> <div class="layui-form layui-form-pane"> <form id="huidaform" name="answerForm" method="post"> <div class="layui-form-item layui-form-text"> <a name="comment"></a> <div class="layui-input-block"> <script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.config.js"></script> <script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.all.js"></script> <script type="text/plain" id="editor" name="content" style="width:100%;height:200px;"></script> <script type="text/javascript"> var isueditor=1; var editor = UE.getEditor('editor',{ //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个 toolbars:[['source','fullscreen', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', 'anchor', '|', 'simpleupload', 'insertimage', 'scrawl', 'insertvideo', 'attachment', 'map', 'insertcode', '|', 'horizontal', '|', 'preview', 'searchreplace', 'drafts']], initialContent:'', //关闭字数统计 wordCount:false, zIndex:2, //关闭elementPath elementPathEnabled:false, //默认的编辑区域高度 initialFrameHeight:250 //更多其他参数，请参考ueditor.config.js中的配置项 //更多其他参数，请参考ueditor.config.js中的配置项 }); editor.ready(function() { editor.setDisabled(); }); $("#editor").find("*").css("max-width","362px"); </script> </div> </div> <div class="layui-form-item"> <label for="L_vercode" class="layui-form-label">验证码</label> <div class="layui-input-inline"> <input type="text" id="code" name="code" value="" required lay-verify="required" placeholder="图片验证码" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid"> <span style="color: #c00;"><img class="hand" src="https://www.e-learn.cn/qa/user/code.html" onclick="javascript:updatecode();" id="verifycode"><a class="changecode" href="javascript:updatecode();"> 看不清?</a></span> </div> </div> <div class="layui-form-item"> <input type="hidden" value="818225" id="ans_qid" name="qid"> <input type="hidden" id="tokenkey" name="tokenkey" value=''/> <input type="hidden" value="How to color specific character(s) in textarea" id="ans_title" name="title"> <div class="layui-btn layui-btn-disabled" id="ajaxsubmitasnwer" >提交回复</div> </div> </form> </div> </div> <input type="hidden" value="818225" id="adopt_qid" name="qid" /> <input type="hidden" id="adopt_answer" value="0" name="aid" /> </div> <div class="layui-col-md4"> <!-- 热门讨论问题 --> <dl class="fly-panel fly-list-one"> <dt class="fly-panel-title">热议问题</dt> <!-- 本周热门讨论问题显示10条-->
</code>. I need to color the specific character that i found in text area. How can I colo <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5408099190056760" data-ad-slot="7305827575" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="fly-panel detail-box" id="flyReply"> <fieldset class="layui-elem-field layui-field-title" style="text-align: center;"> <legend>3条回答</legend> </fieldset> <ul class="jieda" id="jieda"> <li data-id="111" class="jieda-daan"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href=""> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000010.jpg" alt=" 慢半拍i "> </a> <div class="fly-detail-user"> <a href="" class="fly-link"> <cite> 慢半拍i</cite> </a> <span>(楼主)</span> </div> <div class="detail-hits"> <span>2021-01-20 19:22</span> </div> </div> <div class="detail-body jieda-body photos"> <p> <p>You can't change it in a <code>textarea</code> because <code>textarea</code> only contains pure text, to add format to words yo ufound you need to surround these matched words within html elements, so this why it won't work, as in this JSFiddle, just another way of doing it, you can search for <em>multiple words</em> if you separate them by a space in the search box like <code>item1 item item3</code>:</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var div = $('#text'), kw,keywords, i, j; $('#btn').on('click', function (event) { event.preventDefault(); console.clear(); kw = $('#keywords').val(); keywords = kw.split(" "); text = div.text(); text = text.replace(/,|\.|\?/i, ""); text = text.split(" "); for (i = 0; i < text.length; i++) { for (j = 0; j < keywords.length; j++) { if (text[i] == keywords[j]) { text[i] = '<span class="hl">' + text[i] + '</span>'; } } } text = text.join(" "); div.html(text); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>div { width:400px; height:250px; display:block; overflow:hidden; border:lightgrey 2px inset; padding:1px; overflow:hidden; overflow-y:scroll; } .hl{ background-color:orange; padding:2px 3px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <form name="form"> <input id="keywords" type="text" value=""> <input id="btn" type="submit" value="Search"> <div id="text" contentEditable=true>Skinny grinder, redeye whipped, cream aftertaste, aroma white sit brewed fair trade froth. At, aroma, caffeine as, cream shop chicory, wings kopi-luwak espresso cream lungo. Siphon pumpkin spice ut plunger pot americano single shot robusta kopi-luwak. So, half and half mug instant frappuccino, trifecta caramelization mazagran sit black. Sit americano cup, blue mountain coffee, blue mountain, breve cinnamon instant grounds cappuccino. Espresso plunger pot trifecta, redeye sit, qui ristretto bar caramelization turkish carajillo. Qui caramelization pumpkin spice crema skinny frappuccino sit turkish. Dark affogato, filter americano est mocha cream frappuccino. Ut qui, arabica froth affogato shop, fair trade cultivar espresso kopi-luwak black. Cortado, instant crema flavour saucer mocha brewed. Single shot extra, est frappuccino half and half, fair trade qui acerbic lungo cappuccino grounds beans. Flavour irish kopi-luwak decaffeinated eu cream dripper cultivar cup cappuccino. Dripper, americano that latte sit skinny in percolator coffee coffee half and half. Extraction wings cultivar roast, whipped french press arabica affogato dripper coffee. Crema to go, coffee cortado breve americano eu viennese. Redeye affogato, seasonal that medium roast viennese. That at dripper, robusta frappuccino crema filter ut seasonal latte. Breve, qui con panna, saucer cinnamon flavour caramelization foam decaffeinated galão con panna. In medium coffee est trifecta shop at chicory acerbic rich aged. Cultivar mug white decaffeinated crema affogato, brewed caramelization beans blue mountain mocha. Skinny, seasonal sweet, arabica caramelization wings carajillo rich. Flavour et shop aged at, caramelization trifecta instant a steamed. As, irish seasonal steamed instant espresso frappuccino. Affogato barista aroma dripper macchiato siphon skinny cup strong. Kopi-luwak white spoon mazagran sugar so café au lait. Sugar blue mountain mug siphon wings cup roast affogato. White black café au lait frappuccino body, white flavour strong americano grounds sit kopi-luwak. Turkish, mocha, bar seasonal mug ut skinny. Beans mug percolator espresso caffeine filter caramelization. Black barista percolator aftertaste, saucer frappuccino french press body white. Medium id wings grounds americano crema roast. Dripper, frappuccino mocha est robusta, sit est milk medium body caramelization doppio.</div> </form></code></pre> </div> </div> </p> </p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='1804945'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="1804945"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> <div class="noreplaytext bb"> <center><div> <a href="https://www.e-learn.cn/qa/q-818225.html"> 查看其它3个回答 </a> </div></center> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_1804945"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="1804945">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' /> 加载中... </li> </ul> </div> </li> </ul> <div class="layui-form layui-form-pane"> <form id="huidaform" name="answerForm" method="post"> <div class="layui-form-item layui-form-text"> <a name="comment"></a> <div class="layui-input-block"> <script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.config.js"></script> <script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.all.js"></script> <script type="text/plain" id="editor" name="content" style="width:100%;height:200px;"></script> <script type="text/javascript"> var isueditor=1; var editor = UE.getEditor('editor',{ //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个 toolbars:[['source','fullscreen', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', 'anchor', '|', 'simpleupload', 'insertimage', 'scrawl', 'insertvideo', 'attachment', 'map', 'insertcode', '|', 'horizontal', '|', 'preview', 'searchreplace', 'drafts']], initialContent:'', //关闭字数统计 wordCount:false, zIndex:2, //关闭elementPath elementPathEnabled:false, //默认的编辑区域高度 initialFrameHeight:250 //更多其他参数，请参考ueditor.config.js中的配置项 //更多其他参数，请参考ueditor.config.js中的配置项 }); editor.ready(function() { editor.setDisabled(); }); $("#editor").find("*").css("max-width","362px"); </script> </div> </div> <div class="layui-form-item"> <label for="L_vercode" class="layui-form-label">验证码</label> <div class="layui-input-inline"> <input type="text" id="code" name="code" value="" required lay-verify="required" placeholder="图片验证码" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid"> <span style="color: #c00;"><img class="hand" src="https://www.e-learn.cn/qa/user/code.html" onclick="javascript:updatecode();" id="verifycode"><a class="changecode" href="javascript:updatecode();"> 看不清?</a></span> </div> </div> <div class="layui-form-item"> <input type="hidden" value="818225" id="ans_qid" name="qid"> <input type="hidden" id="tokenkey" name="tokenkey" value=''/> <input type="hidden" value="How to color specific character(s) in textarea" id="ans_title" name="title"> <div class="layui-btn layui-btn-disabled" id="ajaxsubmitasnwer" >提交回复</div> </div> </form> </div> </div> <input type="hidden" value="818225" id="adopt_qid" name="qid" /> <input type="hidden" id="adopt_answer" value="0" name="aid" /> </div> <div class="layui-col-md4"> <!-- 热门讨论问题 --> <dl class="fly-panel fly-list-one"> <dt class="fly-panel-title">热议问题</dt> <!-- 本周热门讨论问题显示10条-->
