We have a two column HTML layout. I want to implement forward search and backward search for a particular character in HTML using the Range API say "$" character in IE11
Earlier in IE10 we used to use TextRange API of IE to do it, the way we used to handle it was, if we have cursor position in first "$" character, we used to create two ranges range1, range2. range1 would be current selection range and range2 would be on entire document. Then we would use setEndPointAPI to TextRange to set start of range2 same as range1 and end of range1 same as range2. This enables us to find the text in forward direction using the TextRange's findText API, and once the character is found I have to select that character and vice versa for reverse search.
Now that Textrange has been deprecated starting from IE11, I tried to use the same using Range but since the APIs are not readily available as in TextRange API, is there any other way to mimic the same functionality?
corresponding HTML source:
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}</style></head><body><table width="100%"><tr><td><div class="column" style="background-color:#aaa;"><div><span style="font-weight: bold; text-decoration: underline;">Test 1</span><p>Some te$xt..</p></div><div><span style="font-weight: bold; text-decoration: underline;">Test 2</span><p>Some te$xt..</p><div></div></td><td><div class="column" style="background-color:#aaa;"><div><span style="font-weight: bold; text-decoration: underline;">Test 3</span><p>Some t$ext..</p></div><div><span style="font-weight: bold; text-decoration: underline;">Test 4</span><p>Some t$ext..</p><div></div></td></tr></table></body></html>