Lightweight Textara Plugin

This lightweight textarea template adds a simple find-and-edit feature without changing the editor into a full rich text system. Select a word, place it into the edit field, highlight every matching word, and replace all highlighted matches with one click or by pressing Enter.

Textarea Find and Edit Template Article

This plugin adds a clean [Find] and [Edit All] feature to a plain textarea editor. Designed for those who work with regular text, BBCode, or code-style content, where you do not want to turn the writing area into a rich text editor.

You select a word inside the textarea, and that word is placed into the edit field. Each matching word is then visually highlighted. Type what you want in the edit field, and click the [Enter] key to update every highlighted match at once.

The editor works well for quick cleanup jobs, repeated wording changes, small template edits, and correcting the same word throughout an article. The textarea itself remains plain text, while a separate overlay layer handles the highlight effect. That keeps the editor lightweight and avoids interfering with existing preview, BBCode, or syntax systems.

Because this is only a front-end helper, it can be added to an existing editor without changing any backend code.

This one will be updated regularly, so keep an eye out. (Email list is coming soon as well.)

Live Template Example - Textarea Find and Edit

The background color of the selected text can be changed on
[Line: 37] of the CSS.

[CSS - Load.css]

CFFCS | CarrzSynEdit: | CSS (Cascading Style Sheets)

    font-family: Arial, sans-serif;
    background:#f4f4f4;
    padding:20px;
}

.wrapper{
    position:relative;
    width:900px;
    max-width:100%;
}

#highlightLayer,
#myTextarea{
    width:100%;
    height:300px;
    font-size:16px;
    line-height:1.5;
    font-family:Consolas, monospace;
    padding:15px;
    border:1px solid #999;
    box-sizing:border-box;
    white-space:pre-wrap;
    word-wrap:break-word;
}

#highlightLayer{
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    color:transparent;
    background:#fff;
    pointer-events:none;
}

#highlightLayer mark{
    background:yellow;
    color:transparent;
    padding:0;
}

#myTextarea{
    position:relative;
    background:transparent;
    color:#000;
    resize:vertical;
}

.controls{
    margin-bottom:15px;
}

#editWord{
    padding:8px;
    font-size:15px;
    width:260px;
    margin-right:10px;
}

button{
    padding:8px 14px;
    cursor:pointer;
}

.note{
    font-size:13px;
    color:#555;
    margin-top:8px;
}

[HTML - ]

CFFCS | CarrzSynEdit: | HTML (Hyper Text Markup Language)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Textarea Word Highlight Edit Demo</title>
  <link href="Load.css" rel="stylesheet" />
</head>
<body>

<h2>Textarea Word Highlight + Edit All Demo</h2>

<div class="controls">
    <input type="text" id="editWord" placeholder="Select a word, then edit it here">
    <button id="applyEditBtn">Apply Edit</button>
    <div class="note">Select a word in the textarea. Edit the textbox, then press Enter or click Apply Edit.</div>
</div>

<div class="wrapper">
    <div id="highlightLayer"></div>
    <textarea id="myTextarea">This is a demo textarea.Select any word in this textarea.
The selected word will appear in the textbox above.
All matching words will become highlighted.

Edit the word in the textbox and press Enter.
Every highlighted match will be changed at once.

Try selecting the word textarea or demo.</textarea>
</div>
    <script src="Load.js"></script>
</body>
</html>

[JavaScript - Load.js]

CFFCS | CarrzSynEdit: | JS (JavaScript)

const textarea = document.getElementById("myTextarea");
const highlightLayer = document.getElementById("highlightLayer");
const editWord = document.getElementById("editWord");
const applyEditBtn = document.getElementById("applyEditBtn");

let currentHighlightedWord = "";

function escapeHtml(text){
    return text
        .replace(/&/g, "&")
        .replace(/</g, "<")
        .replace(/>/g, ">");
}

function escapeRegex(text){
    return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

function highlightMatches(word){
    let text = escapeHtml(textarea.value);

    if(word.trim() !== ""){
        const regex = new RegExp("(" + escapeRegex(word) + ")", "gi");
        text = text.replace(regex, "<mark>$1</mark>");
    }

    highlightLayer.innerHTML = text;
}

function selectWordFromTextarea(){
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const selected = textarea.value.substring(start, end).trim();

    if(selected.length > 0){
        currentHighlightedWord = selected;
        editWord.value = selected;
        highlightMatches(selected);
    }
}

function applyEditToHighlightedWords(){
    const replacement = editWord.value;

    if(currentHighlightedWord.trim() === ""){
        return;
    }

    const regex = new RegExp(escapeRegex(currentHighlightedWord), "gi");

    textarea.value = textarea.value.replace(regex, replacement);

    currentHighlightedWord = replacement;
    highlightMatches(currentHighlightedWord);
}

textarea.addEventListener("mouseup", selectWordFromTextarea);
textarea.addEventListener("keyup", function(e){
    if(e.key === "Enter"){
        return;
    }

    selectWordFromTextarea();
});

textarea.addEventListener("scroll", function(){
    highlightLayer.scrollTop = textarea.scrollTop;
    highlightLayer.scrollLeft = textarea.scrollLeft;
});

applyEditBtn.addEventListener("click", applyEditToHighlightedWords);

editWord.addEventListener("keydown", function(e){
    if(e.key === "Enter"){
        e.preventDefault();
        applyEditToHighlightedWords();
    }
});

highlightMatches("");