如何在不使用 IE11/Edge 中的 TextRange API 的情况下对 HTML 文档中的字符进行正向搜索和反向搜索答案

【问题标题】：How to forward search and reverse search for a character in a HTML document without using TextRange API in IE11/Edge如何在不使用 IE11/Edge 中的 TextRange API 的情况下对 HTML 文档中的字符进行正向搜索和反向搜索
【发布时间】：2020-10-08 14:41:28
【问题描述】：

我们有一个两列的 HTML 布局。我想对 HTML 中的特定字符实现前向搜索和后向搜索，例如 IE11 中的“$”字符

enter image description here

在IE10之前我们使用IE的TextRange API来做，我们过去处理的方式是，如果我们在第一个“$”字符中有光标位置，我们习惯创建两个范围range1，range2。 range1 将是当前选择范围，而 range2 将在整个文档上。然后我们将使用 setEndPointAPI 到 TextRange 来设置 range2 的开始与 range1 相同，range1 的结束与 range2 相同。这使我们能够使用 TextRange 的 findText API 以正向查找文本，一旦找到字符，我必须选择该字符，反之亦然以进行反向搜索。

现在 Textrange 从 IE11 开始已被弃用，我尝试使用 Range 来使用相同的 API，但由于 API 不像 TextRange API 那样容易获得，有没有其他方法可以模仿相同的功能？

对应的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>

【问题讨论】：

标签： javascript internet-explorer internet-explorer-11

【解决方案1】：

您可以尝试使用 JavaScript 字符串方法来查找相关字符并突出显示选定的文本。请参考以下示例代码（online sample）：

CSS 样式：

<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;
    }

    .highlight {
        background-color: yellow;
    }
</style>

JavaScript

<script>
    var currentindex = -1; //default status
    var items = [];
    var field; 
    function Init() {
        items = [];
        field = document.getElementById("findField").value;
        var plist = document.getElementsByTagName("P");
        for (var i = 0; i < plist.length; i++) {
            if (plist[i].innerHTML.toLowerCase().indexOf(field) > -1) {
                items.push(plist[i]);
            }
        }
    }

    function textchange() {
        for (var i = 0; i < items.length; i++) {
            items[i].innerHTML = items[i].innerHTML.replace(/<\/?span[^>]*>/g, "");
        }
        currentindex = -1;
    }
    function FindNext() {
        Init();
        if (items.length > 0) { 
            if (currentindex == items.length-1) {
                items[currentindex].innerHTML = items[currentindex].innerHTML.replace(/<\/?span[^>]*>/g, "");
                currentindex = 0;
                items[currentindex].innerHTML = items[currentindex].innerHTML.replace(field, "<span class='highlight'>" + field + "</span>");
            }
            else { 

                if (currentindex != -1) 
                    items[currentindex].innerHTML = items[currentindex].innerHTML.replace(/<\/?span[^>]*>/g, ""); //click the Forward button at the first time
                currentindex++;
                items[currentindex].innerHTML = items[currentindex].innerHTML.replace(field, "<span class='highlight'>" + field + "</span>");
            }   
        }
        else {
            alert("the value was not found");
        }
    }

    function FindPrevious() {
        Init();
        if (items.length > 0) {
            if (currentindex == -1) { 
                // click the previous button at the first time.
                currentindex = items.length - 1;
                items[currentindex].innerHTML = items[currentindex].innerHTML.replace(field, "<span class='highlight'>" + field + "</span>");
            }
            else {
                if (currentindex == 0) {
                    items[currentindex].innerHTML = items[currentindex].innerHTML.replace(/<\/?span[^>]*>/g, "");
                    currentindex = items.length - 1;
                    items[currentindex].innerHTML = items[currentindex].innerHTML.replace(field, "<span class='highlight'>" + field + "</span>");
                }
                else { 
                    items[currentindex].innerHTML = items[currentindex].innerHTML.replace(/<\/?span[^>]*>/g, "");
                    currentindex--;
                    items[currentindex].innerHTML = items[currentindex].innerHTML.replace(field, "<span class='highlight'>" + field + "</span>");
                }
            }           
            //console.log(currentindex);
        }
        else {
            alert("the value was not found");
        }
    }
</script

然后，输出如下：

【讨论】：