javascript - How to hide an element, based on its text, with JavaScript?

Question

I'm a beginner developer. I'm trying to hide a div that is dynamically added to the page by a 3rd party JavaScript for aesthetic purposes.

The problem is that the div has no id attribute; is this even possible? Do divs have any inherent attributes based on the order in which they load? Or is there any way to search for a string of text and hide the element?

For example, removing <div>happy New year</div> based on its text happy New year.

score 9 · Accepted Answer

最初に関連する要素を選択し、必要なものが見つかるまでそれらを繰り返すことができます。

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

score 3 · Accepted Answer

私はプレーンな 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 フィドルのデモ。

score 1 · Accepted Answer

以前の回答では、結合されたテキストコンテンツに基づいてノードが非表示になります (動作を参照.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()jQuery メソッド

.contents()jQuery メソッド

nodeTypeノードプロパティ

.remove()jQuery メソッド

javascript - How to hide an element, based on its text, with JavaScript?

4 に答える 4

Related

Reference