如何为文本区域中的特定字符着色

Question

我正在制作一个程序来搜索所需的字符<textarea>。我需要为我在文本区域中找到的特定字符着色。如何为 中的字符着色<textarea>？例如，如果我在输入字段中输入“a”，则所有“a”都<textarea>应该染成红色......

超文本标记语言

<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 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）。谢谢。

Answer 1

正如 @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>（文本区域）将如下所示：

<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>

尝试这个例子（结果实际上非常好，我很惊讶）。