javascript-如何为textarea中的特定字符着色

2019-10-11 21:38:51 阅读：317 来源： 互联网

我正在编写一个程序来搜索所需的< textarea>中的字符.我需要为在文本区域中找到的特定字符上色.如何为< textarea>中的字符上色？例如,如果我在输入字段中输入的是“ a”,而不是< textarea>中的所有“ a”.应该染成红色…..

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>

<script language="javascript">
    function check(form)
    {
        if(form.para.value==""){
            alert("No text is available for search!!");
            return false;
        }
        if(form.character.value=="")
        {
            alert("Search keyword is 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 the Text!!");
            return false;
        }
    }
</script>

我正在寻找任何解决方案,无论是CSS,HTML,JS(还是jQuery).谢谢.

解决方法:

正如@ Mohamed-Yousef在他的评论中所说,我认为您不能将标签或样式放在< textarea>中.

一种替代方法是使用用户可编辑的< div>.这样,您可以使用JS放置带有样式的其他标签.

例如：

<div contenteditable="true">
<!-- Editable like a textarea, but without some of its default styles and functions -->

    This is the text in which to highlight letters.

</div>

这样,如果您搜索“ e”,则可以制作一个JS脚本,在所有“ e”周围添加样式化元素,以便您的< div> (textarea)看起来像这样：

<div contenteditable="true">

    This is the t<span style="background-color: yellow">e</span>xt in which to highlight l<span style="background-color: yellow">e</span>tt<span style="background-color: yellow">e</span>rs.

</div>

尝试this example(实际上结果很好,我很惊讶).

标签：javascript,jquery,css,textarea
来源： https://codeday.me/bug/20191011/1895675.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-如何为textarea中的特定字符着色