且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-12-05 10:57:40

您不能在textarea中进行更改,因为textarea仅包含纯文本,要为找到的单词添加格式,您需要将这些匹配的单词括起来html元素中的单词,因此这就是为什么它不起作用的原因,例如 JSFiddle ,这是另一种实现方式,如果您在搜索框中使用空格将多个单词分隔,例如item1 item item3:

You can't change it in a textarea because textarea 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 multiple words if you separate them by a space in the search box like 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>