I have a basic text editor where the user can search for a term in the text and navigate to the next or previous occurrence. The issue I’m facing is that when the search term is at the very beginning of the textarea
(e.g., the first word “Love”), pressing the “Previous” button doesn’t loop back to the last occurrence. However, this works fine if the search term is not at the start of the text (e.g., searching for the term “never”).
Here is the relevant code:
let currentMatchIndex = -1; // Tracks the current match index
function resetIndex() {
currentMatchIndex = -1;
}
function highlightMatch(startIndex, endIndex) {
const textarea = document.getElementById('myTextarea');
textarea.setSelectionRange(startIndex, endIndex);
textarea.focus();
}
function next() {
const findTerm = document.getElementById('findInput').value;
const textarea = document.getElementById('myTextarea');
const text = textarea.value;
if (findTerm) {
const startIndex = text.indexOf(findTerm, currentMatchIndex + 1);
if (startIndex !== -1) {
currentMatchIndex = startIndex;
} else {
currentMatchIndex = text.indexOf(findTerm); // Loop back to first occurrence
}
if (currentMatchIndex !== -1) {
highlightMatch(currentMatchIndex, currentMatchIndex + findTerm.length);
} else {
alert("Find term not found.");
}
}
}
function previous() {
const findTerm = document.getElementById('findInput').value;
const textarea = document.getElementById('myTextarea');
const text = textarea.value;
if (findTerm) {
const startIndex = text.lastIndexOf(findTerm, currentMatchIndex - 1);
if (startIndex !== -1) {
currentMatchIndex = startIndex;
} else {
currentMatchIndex = text.lastIndexOf(findTerm); // Loop to last occurrence
}
if (currentMatchIndex !== -1) {
highlightMatch(currentMatchIndex, currentMatchIndex + findTerm.length);
} else {
alert("Find term not found.");
}
}
}
<input type="text" id="findInput" placeholder="Find" onchange="resetIndex()">
<button onclick="next()">Next</button>
<button onclick="previous()">Previous</button>
<textarea id="myTextarea" rows="1" cols="50">Love never dies. Love never dies. Love never dies.</textarea>
Issue
When the search term is the first word in the textarea
(e.g., “Love”), and I press the “Previous” button, it does not loop back to the last occurrence. However, if I search for a term like “never,” it works fine and loops as expected.
Expected behavior
- When the “Next” button is pressed, it finds the next occurrence.
- When the “Previous” button is pressed, it loops to the last occurrence when it reaches the first match.
Has anyone encountered this issue before or knows how to fix it?