javascript - 如何使用 JavaScript 根据其文本隐藏元素？

Question

我是初学者开发人员。为了美观，我试图隐藏一个由第三方 JavaScript 动态添加到页面的 div。

问题是 div 没有id属性；这甚至可能吗？div 是否具有基于加载顺序的任何固有属性？或者有什么方法可以搜索一串文本并隐藏元素？

例如，<div>happy New year</div>根据其 text删除happy New year。

Answer 1

您可以先选择相关元素并遍历它们，直到找到您想要的。

在 JQuery 中可以这样完成：

// select relevant elements
var elements = $('div');

// go through the elements and find the one with the value
elements.each(function(index, domElement) {
    var $element = $(domElement);

    // does the element have the text we're looking for?
    if ($element.text() === "happy New year") {
        $element.hide();
            // hide the element with jQuery
        return false; 
            // jump out of the each
    }
});

请注意，代码有点脆弱，完全取决于元素的内容。以下是相关的 JQuery api 文档：

• jQuery 中的选择器( $(...))
• jQuery.each()- 用于遍历 jquery 对象数组
• jQuery.text()- 获取价值（浏览器之间在纯 JavaScript 中执行此操作的方式存在细微但明显的差异）
• jQuery.hide()- 用于隐藏具有 CSS 样式的元素display: none

请注意，您可以更具体地选择您有以下代码：

<div class="message">
    <div>happy New year<div>
</div>

您可以通过以下方式选择元素：

var domElement = $('.message div')[0]; // hopefully it only happens once

Answer 2

我想我会提供一个纯 JavaScript 替代方案，它可以改进（相当多），特别是布尔值作为字符串的传递（感觉很可怕）：

function hideByText(text, opts) {
    if (!text) {
        return false;
    }
    else {
        var defaults = {
            // the element we look within, expects:
            // 1: node reference, eg the result of: document.getElementsByTagName('div')[0]
            // 2: an element's id, as a string, eg: 'test'
            'within': document.body,
            // the element type, eg 'div', 'span', 'p', defaults to *everything*
            'elemType': '*',
            // case-sensitivity, as a string:
            // 'true' : is case sensitive, 'Some' will not match 'some',
            // 'false' : is case insensitive, 'Some' will match 'some'
            'sensitive': 'true',
            // 'absolute' : 'some text' will not match 'some text.'
            // 'partial' : 'some text' will match 'some text.'
            'match': 'absolute',
            // 'true' : removes white-space from beginning, and end, of the text,
            // 'false' : does not remove white-space
            'trim': 'true',
            // the class to add to elements if a match is made,
            // use CSS to hide, or style, the matched elements
            'matchedClass': 'hasText'
        },
            opts = opts || {};

        for (var setting in defaults) {
            if (defaults.hasOwnProperty(setting)) {
                opts[setting] = opts[setting] || defaults[setting];
            }
        }

        var within = opts.within.nodeType == 1 ? opts.within : document.getElementById(opts.within),
            elems = within.getElementsByTagName(opts.elemType),
            flags = opts.sensitive == 'true' ? 'i' : '',
            needle = opts.trim == 'true' ? text.replace(/^(\s+) || (\s+)$/g, '') : text,
            haystack,
            reg = new RegExp(needle, flags);

        if (opts.match == 'absolute') {
            for (var i = 0, len = elems.length; i < len; i++) {
                if ((elems[i].textContent || elems[i].innerText) == text) {
                    elems[i].className = opts.matchedClass;
                }
            }
        }
        else if (opts.match == 'partial') {
            for (var i = 0, len = elems.length; i < len; i++) {
                if ((elems[i].textContent || elems[i].innerText).match(reg)) {
                    elems[i].className = opts.matchedClass;
                }
            }
        }
    }
}

hideByText('some text', {
    'match': 'partial',
    'sensitive': 'true',
    'elemType': 'p',
    'matchedClass' : 'hasText'
});​

JS 小提琴演示。

Answer 3

先前的答案将隐藏基于组合文本内容的节点（请参阅.text()行为）。以下测试用例将说明这一点：

should stay: <div><em>happy New year</em></div><br>
should stay: <div>happy New years</div><br>
should stay: <div>happy New <em>year</em></div><br>
should stay: <div>Something else entirely</div><br>
should hide: <div>happy New year</div>

此处显示：jsFiddle

根据您的具体情况，这种更一般的行为可能是您想要的，因为它会忽略后代结构并仅与组合文本匹配。但是，如果您需要隐藏<div>具体包含文本的内容，则类似以下内容将仅隐藏<div>测试用例中的最后一个：

var tx = 'happy New year';
$('div:contains(' + tx + ')').filter(function(){
    var $content = $(this).contents();
    return $content.length === 1 && 
        $content[0].nodeType === 3 &&
        $content.text() === tx;
}).hide();

此处显示：jsFiddle

可以修改初始选择器以隐藏包含特定文本的任何内容。这种更通用的方法将隐藏<em>第一种情况下的<div>元素和最后一种情况下的元素：

$(':contains(' + tx + ')').filter(// etc...

您可能会考虑从 DOM 中删除元素，而不是仅仅隐藏它。

:contains()jQuery 选择器

.filter()方法

.contents()方法

nodeType节点属性

.remove()方法

Answer 4

您实际上可以使用一行来完成

$("div").text("happy New year").hide();