如何在textarea中为特定字符着色

Question

我正在制作一个程序来搜索所需<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>

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>（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（实际上结果非常好，我很惊讶）。

Answer 2

你不能在textarea中更改它，因为textarea只包含纯文本，要将格式添加到单词中，你需要在html元素中包围这些匹配的单词，这就是为什么它赢了如果只是另一种方式，你可以搜索多个单词，如果你用item1 item item3搜索框中的空格分隔多个单词 ：

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);
});

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

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

Answer 3

尝试按照提及将div更改为可编辑

function check(form)
{
    var searchMe=document.getElementById('searchMe').innerHTML;
    console.log(searchMe);
    if(searchMe==""){
        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=searchMe;
    found=0;
    k=0;
    console.log(searchMe);  
    searchMe=searchMe.replace(keyword,'<span style="background-color: yellow">'+keyword+'</span>');
    console.log(searchMe);
    document.getElementById('searchMe').innerHTML=searchMe;
    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;}
    }

<div name="para" cols="30" rows="10" contentEditable=true id="searchMe">hello World</div>