如何在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 元素中包围这些匹配的单词，所以这就是它不起作用的原因，就像在这个JSFiddle 中一样，只是另一种方式，您可以搜索多个单词，如果您在搜索框中用空格分隔它们，例如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>