JS实现div内搜索时如何避免匹配标签属性，仅匹配可见文本？

解决方案 #

你可以用DOM元素的textContent属性替代innerHTML，textContent只会返回元素及所有子元素的纯可见文本内容，会自动过滤HTML标签、属性名等代码内容，刚好匹配你的需求。

修改后的完整代码如下：

function search_animal() {
    let input = document.getElementById('searchbar').value
    input = input.toLowerCase();
    let x = document.getElementsByClassName('separateline');

    for (i = 0; i < x.length; i++) {
        // 替换innerHTML为textContent
        if (!x[i].textContent.toLowerCase().includes(input)) {
            x[i].style.display = "none";
        }
        else {
            x[i].style.display = "";
        }
    }
}

可选优化方案 #

如果需要更精准匹配，只校验separateline下a标签的文本，避免其他子元素的无关文本干扰，可以单独选中目标a标签获取文本，示例如下：

function search_animal() {
    let input = document.getElementById('searchbar').value
    input = input.toLowerCase();
    let x = document.getElementsByClassName('separateline');

    for (i = 0; i < x.length; i++) {
        // 单独获取a标签的文本内容
        let targetText = x[i].querySelector('.tabcontentlink').textContent.toLowerCase();
        if (!targetText.includes(input)) {
            x[i].style.display = "none";
        }
        else {
            x[i].style.display = "";
        }
    }
}

内容的提问来源于stack exchange，提问作者Edvard