尝试仅突出显示页面的一部分

Question

我有一个可用的荧光笔功能。但是，它突出显示了整个网页。因此，例如，如果我搜索“诗篇”，所有这些都会在“book_name”部分中突出显示。我只想突出显示“文本”部分。我尝试使用“document.getElementById”代替 document.body，并为文本指定一个 id，但不出所料，它仅突出显示第一个搜索结果。我也尝试了“document.getElementByClass”、名称和标签，但单击按钮时没有任何反应。

<table action="/Bible" method="get" class="table table-hover">

    <button onclick="inc(id)" style="background: crimson; display:{{ display_highlight }}">Highlight</button>
    <tbody>
        <h1>Bible</h1>
        <tr>
            <th>Number</th>
            <th>Book</th>
            <th>Chapter</th>
            <th>Verse</th>
            <th>Text</th>
        </tr>
        {% for i in lst %}
        <tr>
            <td>
                <p>{{i.number}}</p>
            </td>
            <td>
                <p><b>{{i.book_name}}</b></p>
            </td>
            <td>
                <p>{{i.chapter}}</p>
            </td>
            <td>
                <p>{{i.verse}}</p>
            </td>
            <td>
                <p>{{i.text}}</p>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</body>

<script>
    var search_upper = {{search_upper|tojson}};
    var search_lower = {{search_lower|tojson}};
    // Works great for passing Flask value to Javascript

    function highlight() {
        document.body.innerHTML = document.body.innerHTML.replace (new RegExp (search_upper, 'g'), "<mark>{{search_upper}}</mark>");
        document.body.innerHTML = document.body.innerHTML.replace (new RegExp (search_lower, 'g'), "<mark>{{search_lower}}</mark>");
    }

    function dehighlight() {
        document.body.innerHTML = document.body.innerHTML.replace (new RegExp (search_upper, 'g'), "<p>{{search_upper}}</p>");
        document.body.innerHTML = document.body.innerHTML.replace (new RegExp (search_lower, 'g'), "<p>{{search_lower}}</p>");

        const matches = document.querySelectorAll("mark");
        matches.forEach(mark => {
        mark.remove();
        });
        // Removes all <mark> tags
    }

    var count = 0;

    function inc(){
    count ++;
    if (count % 2 == 0) {
        dehighlight();
    } else {
        highlight();
    }
};
</script>

Answer 1

您可以为包含要突出显示的文本的

<p>

内的

<td>

元素指定特定的类。然后，您可以使用

document.getElementsByClassName

选择具有该类的所有元素并对它们应用突出显示。

例如，您可以按如下方式调整 HTML：

<td>
    <p class="text-to-highlight">{{i.text}}</p>
</td>

然后，修改你的 JavaScript：

function highlight() {
    let textsToHighlight = document.getElementsByClassName('text-to-highlight');
    for(let text of textsToHighlight) {
        text.innerHTML = text.innerHTML.replace(new RegExp(search_upper, 'g'), "<mark>{{search_upper}}</mark>");
        text.innerHTML = text.innerHTML.replace(new RegExp(search_lower, 'g'), "<mark>{{search_lower}}</mark>");
    }
}

function dehighlight() {
    let highlightedTexts = document.getElementsByClassName('text-to-highlight');
    for(let text of highlightedTexts) {
        text.innerHTML = text.innerHTML.replace(new RegExp(search_upper, 'g'), "{{search_upper}}");
        text.innerHTML = text.innerHTML.replace(new RegExp(search_lower, 'g'), "{{search_lower}}");
    }
    
    // If you want to remove <mark> tags, iterate over each element and remove them.
    const marks = document.querySelectorAll("mark");
    marks.forEach(mark => mark.outerHTML = mark.innerHTML);
}

通过这种方式，突出显示仅限于具有 text-to-highlight 类的元素，而不是应用于整个文档。

注意：修改innerHTML 时应小心，因为它可能会导致附加事件丢失，并且可能使您的网站遭受跨站脚本(XSS) 攻击。考虑使用 DOM 操作函数或安全处理 DOM 节点创建和更新的库。