js 指定页面元素 搜索定位 高亮 下一个 实现逻辑

实现这个功能的逻辑如下：

1. 获取用户输入的搜索关键字。
2. 遍历页面上的所有元素，找出文本内容中包含搜索关键字的元素。
3. 将找到的元素逐个高亮显示。
4. 记录当前高亮显示的元素位置，当用户点击下一个按钮时，取消当前元素的高亮，将下一个元素高亮显示。

具体实现可以使用 JavaScript 和 CSS 来完成：

1. 获取用户输入的搜索关键字：

var keyword = document.getElementById("searchInput").value;

2. 遍历页面上的所有元素，找出文本内容中包含搜索关键字的元素：

var elements = document.getElementsByTagName("*"); // 获取所有元素
for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    if (element.innerHTML.indexOf(keyword) != -1) { // 如果元素内容包含关键字
        element.classList.add("highlight"); // 添加高亮样式
    }
}

3. 将找到的元素逐个高亮显示：

.highlight {
    background-color: yellow;
}

4. 记录当前高亮显示的元素位置，当用户点击下一个按钮时，取消当前元素的高亮，将下一个元素高亮显示：

var currentIndex = 0; // 当前高亮元素的位置
var highlightedElements = document.querySelectorAll(".highlight");

function highlightNext() {
    if (highlightedElements.length > 0) {
        highlightedElements[currentIndex].classList.remove("highlight"); // 取消当前元素的高亮
        currentIndex = (currentIndex + 1) % highlightedElements.length; // 更新当前元素位置
        highlightedElements[currentIndex].classList.add("highlight"); // 高亮下一个元素
    }
}

这样就完成了搜索定位和高亮下一个的功能。