У нас есть двухколоночная HTML раскладка. Я хочу реализовать поиск вперед и назад для определенного символа в HTML, как и символ «$» в IE11
введите описание изображения здесь
Ранее в IE10 мы использовали для этого API TextRange IE, как мы использовали для его обработки, если у нас есть позиция курсора в первом символе «$», мы использовали для создания двух диапазонов range1, range2. Диапазон1 будет текущим диапазоном выбора, а диапазон2 - всем документом. Затем мы использовали бы setEndPointAPI для TextRange, чтобы установить начало диапазона 2, такое же, как диапазон 1, и конец диапазона 1, такое же, как диапазон 2. Это позволяет нам находить текст в прямом направлении с помощью API findText TextRange, и как только символ будет найден, я должен выбрать этот символ, и наоборот для обратного поиска.
Теперь, когда Textrange устарела, начиная с IE11 , Я попытался использовать то же самое, используя Range, но поскольку API-интерфейсы не так легко доступны, как в TextRange API, есть ли другой способ использовать c ту же функциональность?
соответствующий HTML источник:
<!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>