Simply put, I am looking to implement a basic search feature within my HTML div. Each potential search tag is enclosed by $ and every tag is unique.
My objective is to develop a function that takes a tag, scans the div, and identifies the line (Y position) of that tag within the div.
The main challenge lies in determining the position of a string within the text. I can verify if the string exists, but establishing its precise location in the div poses a difficulty.
(In this case, it would be denoted by getLineWhereTagIsFound(tag)).
Note: One approach could involve counting the occurrences of <br> elements until locating the tag, though its reliability remains uncertain.
This is the current progress that has been made.
<div id="helpText" class='onlyTextScroll container'>
$Fruits$<br>
Fruits are very nice.<br>
Fruits are very nice.<br>
Fruits are very nice.<br>
Fruits are very nice.<br>
Fruits are very nice.<br>
Fruits are very nice.<br>
Fruits are very nice.<br>
Fruits are very nice.<br>
<br>
$Vegetables$<br>
Vegetables are very evil.<br>
Vegetables are very evil.<br>
Vegetables are very evil.<br>
Vegetables are very evil.<br>
Vegetables are very evil.<br>
Vegetables are very evil.<br>
Vegetables are very evil.<br>
<br>
</div>
<script>
function updateHelp(tag){
var y = getLineWhereTagIsFound('$' + tag + '$');
y *= lineHeight;
$("#helpText").scrollTop(y);
}
/* Example
function updateHelp('Vegetables'){
var y = getLineWhereTagIsFound('$' + 'Vegetables' + '$');
//y would be 10 because $Vegetables$ is found on line 10;
//let say lineHeight is 10;
y = y*lineHeight; //10*10
$("#helpText").scrollTop(100);
}
*/
</script>