Как выполнить поиск вперед и назад для символа в документе HTML без использования API TextRange в IE11 / Edge - PullRequest
Новая
       130

Как выполнить поиск вперед и назад для символа в документе HTML без использования API TextRange в IE11 / Edge

0 голосов
/ 18 июня 2020

У нас есть двухколоночная 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>

1 Ответ

0 голосов
/ 19 июня 2020

Вы можете попробовать использовать метод JavaScript String, чтобы найти связанные символы и выделить выделенный текст. См. Следующий пример кода ( онлайн-образец ):

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

Затем вывод, как показано ниже:

enter image description here

...