Steps for highlighting specific character(s) within a textarea

Question

Steps for highlighting specific character(s) within a textarea

I am working on a program to search for specific characters within a designated <textarea> element. I want to be able to highlight or color the characters that match the search criteria within the text area. How can I achieve this effect and color the character(s) within the <textarea>? For example, if a user enters 'a' in the input field, then all instances of 'a' within the <textarea> should be colored red.

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>

I am open to any solutions, whether they involve CSS, HTML, JS, or jQuery. Thank you.

javascript jquery css textarea

Answer 1

Answer №1

According to @Mohamed-Yousef, it seems that inserting tags or styles directly inside a <textarea> is not possible.

One workaround could be using a user-editable <div>, where additional tags with styles can be inserted through Javascript.

For instance:

<div contenteditable="true">
<!-- Works like a textarea, but with different default styles and functionalities -->

    This is the text where you want to apply styling.

</div>

By doing this, a JavaScript function can be created to wrap styled elements around specific characters, such as "e". This would result in the <div> (textarea) displaying content like this:

<div contenteditable="true">

    This is th<span style="background-color: yellow">e</span> text in which we want to emphasize.

</div>

You can test out a live example here (it actually worked quite well, surprisingly).

Answer 2

According to @Mohamed-Yousef, it seems that inserting tags or styles directly inside a <textarea> is not possible.

One workaround could be using a user-editable <div>, where additional tags with styles can be inserted through Javascript.

For instance:

<div contenteditable="true">
<!-- Works like a textarea, but with different default styles and functionalities -->

    This is the text where you want to apply styling.

</div>

By doing this, a JavaScript function can be created to wrap styled elements around specific characters, such as "e". This would result in the <div> (textarea) displaying content like this:

<div contenteditable="true">

    This is th<span style="background-color: yellow">e</span> text in which we want to emphasize.

</div>

You can test out a live example here (it actually worked quite well, surprisingly).

Answer 3

Answer №2

When attempting to modify text within a textarea, it is not possible because textarea elements only contain plain text. To apply formatting to specific words, you must surround these words with HTML elements. This approach is demonstrated in this JSFiddle. You can also search for multiple words by entering them with spaces 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>

Answer 4

When attempting to modify text within a textarea, it is not possible because textarea elements only contain plain text. To apply formatting to specific words, you must surround these words with HTML elements. This approach is demonstrated in this JSFiddle. You can also search for multiple words by entering them with spaces 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>

Answer 5

Answer №3

Give this a try by changing the div to editable

function validateForm(form)
{
    var content=document.getElementById('content').innerHTML;
    console.log(content);
    if(content==""){
        alert("No text available for search!!");
        return false;}
    if(form.keyword.value=="")
    {
    alert("Search keyword is not entered!!");
    return false;
    }
    textArray=new Array();
    indexArray=new Array();
    searchKeyword=form.keyword.value;
    textArray=content;
    found=0;
    i=0;
    console.log(content);  
    content=content.replace(searchKeyword,'<span style="background-color: yellow">'+searchKeyword+'</span>');
    console.log(content);
    document.getElementById('content').innerHTML=content;
    if(found!=0){
        alert(found+" occurrences of "+searchKeyword+" in text");
        alert("Character index: "+indexArray);
        return false;
    }
    else{
    alert("Search keyword not found in the text!!");
    return false;}
    }

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

Answer 6

Give this a try by changing the div to editable

function validateForm(form)
{
    var content=document.getElementById('content').innerHTML;
    console.log(content);
    if(content==""){
        alert("No text available for search!!");
        return false;}
    if(form.keyword.value=="")
    {
    alert("Search keyword is not entered!!");
    return false;
    }
    textArray=new Array();
    indexArray=new Array();
    searchKeyword=form.keyword.value;
    textArray=content;
    found=0;
    i=0;
    console.log(content);  
    content=content.replace(searchKeyword,'<span style="background-color: yellow">'+searchKeyword+'</span>');
    console.log(content);
    document.getElementById('content').innerHTML=content;
    if(found!=0){
        alert(found+" occurrences of "+searchKeyword+" in text");
        alert("Character index: "+indexArray);
        return false;
    }
    else{
    alert("Search keyword not found in the text!!");
    return false;}
    }

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

Steps for highlighting specific character(s) within a textarea

HTML

JS

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble with the fancybox form

One of the two identical pages is experiencing issues with the jQuery leanmodal while the other is

Implementing jQuery .load to effectively extract the Title tag from HTML code

"Utilizing Bootstrap's form-check feature places the checkbox alongside the text

Convert all page links to post requests instead

What is the best method to find a matching property in one array from another?

I aim to break down a function into several functions using jQuery and AJAX for better organization and efficiency

Transitioning from left to right, picture smoothly scrolls into view using Way

What is the best way to ensure the network is idle after clicking on an element in puppeteer?

The intersection observer fails to detect any new elements or entries that are appended to the page after it has

ng-repeat is not functioning properly despite the presence of data

Securing API data: Utilizing encryption techniques in express and nuxtjs to deter scraping efforts

Why does the event fail to trigger in an Angular 5 Kendo grid when the last character is deleted from the input box?

Synchronous execution in Node.js: Best practices for coordinating tasks

Highcharts 3D Pie Chart with Drilldown Feature

Effortlessly altering values within a dynamic key in Firebase's real-time database

The images fail to load on Mozilla browser and appear as blank spaces

"Performing a row count retrieval after updating records in a Microsoft SQL Server database

Link the Sass variable to Vue props

Error encountered while running a mounted hook in Vue.js that was not properly handled