如何在 HTML 文档中正向搜索和反向搜索字符而不使用 IE11/Edge 中的 TextRange API

Question

我们有两列 HTML 布局。我想在HTML中实现对特定字符的正向搜索和反向搜索，比如IE11中的“$”字符

enter image description here

早期的IE10我们是用IE的TextRangeAPI来做的，我们的处理方式是，如果我们的光标位置在第一个“$”字符，我们曾经创建两个范围范围 1、范围 2。 range1 将是当前 selection 范围，range2 将在整个文档中。然后我们将使用 setEndPointAPI 到 TextRange 来设置范围 2 的开始与范围 1 相同，范围 1 的结束与范围 2 相同。这使我们能够使用 TextRange 的 findText API 向前查找文本，一旦找到该字符，我必须 select 该字符，反之亦然以进行反向搜索。

既然 Textrange 从 IE11 开始就被弃用了，我尝试使用相同的 Range 但是因为 APIs 不像 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>

Answer 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

然后，输出如下：

如何在 HTML 文档中正向搜索和反向搜索字符而不使用 IE11/Edge 中的 TextRange API

How to forward search and reverse search for a character in a HTML document without using TextRange API in IE11/Edge

javascript

internet-explorer

internet-explorer-11