web-dev-qa-db-ja.com

テキストでリンクを選択（完全一致）

JQueryを使用して、正確に何らかのテキストを含むリンクを選択します。例えば：

<p><a>This One</a></p>
<p><a>"This One?"</a></p>
<p><a>Unlikely</a></p>

私はこれを試しました：

$('a:contains("This One")')

ただし、最初のリンクと2番目のリンクを選択します。ちょうど「This One」を含む最初のリンクが必要です。どうやってやるの？

jqueryjquery-1.6
85
Endy Tjahjono

あなたはこれを行うことができます：

$('a').filter(function(index) { return $(this).text() === "This One"; });

リファレンス： http://api.jquery.com/filter/

133
FishBasketGordo

私の同僚は、jQueryをこれを行う機能で拡張しました。

$.expr[':'].textEquals = function(a, i, m) {
    return $(a).text().match("^" + m[3] + "$");
};

その結果、次のように正確なテキストで何かを選択できます。

$("label:textEquals('Exact Text to Match')");

毎回正確な構文を覚える必要がないため、これにより簡単になります。彼の投稿全体はこちらです： jQueryカスタムセレクターで正確なテキストで要素を選択します：textEquals

38
Narnian

FishBasketGordoの答えを拡張します。大量の要素を選択しようとしている場合、最初に:contains()を使用して絞り込み、フィルターを適用します。

これにより、全体的な速度が向上します。

$('a:contains("This One")').filter(function(index)
{
    return $(this).text() === "This One";
});
27
djhansel

narimanのソリューションを次のように変更する必要がありました。

$.expr[':'].textEquals = function(a, i, m) {
    var match = $(a).text().match("^" + m[3] + "$")
    return match && match.length > 0;                                                                                                                                                                                                                                            
}

それ以外の場合はchrome（Linux）で動作しませんでした

8
Archer

拡張機能を使用していました

$.expr[':'].textEquals

しかし、私は実装がjQuery 1.7で動作しないことを発見しました（明らかにSizzla.filterの変更）。それを機能させるためにしばらく苦労した後、私は単にそれを達成するためにjQueryプラグインを作成しました。

$.fn.textEquals = function (text) {
    var match = false;
    $(this).each(function () {
        if ($(this).text().match("^" + escapeRegex(text) + "$")) {
            match = true;
            return false;
        }
    });
    return match;
};

つかいます：

$(".ui-autocomplete li").textEquals('Exact Text to Match');

他の誰かがこれに遭遇した場合に備えて、共有したいだけです（、

5
Alvis

ドロップダウンから選択した値を取得する方法：

$.fn.textEquals = function (text) {
    var match = false; 
    var values="";
    $(this).each(function () {
        if ($(this).text().match("^" + text + "$")) {
            values=$(this).val();
            match = true;
            return false;
        }
    });
    return values;
};

console.log($("option").textEquals("Option One"));-ドロップダウンの値を返します

2
Iulia Lucaciu

だから、ナルニアンの答えはかなりうまくいきます。しかし、実際に使用すると、いくつかの問題が発生しました。発見されると予想されていたものが見つかりませんでした。これは、要素のテキストを囲むランダムな空白がある場合があるためです。 「Hello World」を検索している場合でも、「Hello World」、または「Hello World\n」と一致させたいと考えています。したがって、「trim（）」メソッドを関数に追加しただけで、周囲の空白が削除され、機能が向上し始めました。また、変数名を変更して、頭に少しわかりやすくしました。

具体的には...

$.expr[':'].textEquals = function(el, i, m) {
    var searchText = m[3];
    var match = $(el).text().trim().match("^" + searchText + "$")
    return match && match.length > 0;
}

そして二次メモ... trimは、検索されたテキストの前後の空白のみを削除します。単語の途中の空白は削除されません。これは望ましい動作だと思いますが、必要に応じて変更できます。

2
bwest87
$('a:contains("This One")')[0];

フィルターに対する他の全員の回答に基づいて何かを見逃しているように感じますが、なぜ「含む」によって返される要素の配列内の最初の項目を選択しないのですか？

これは、最初のリンクが探しているものと完全に一致することがわかっている場合にのみ機能します。リンクの順序がわからない場合は、他の回答の方が効果的です。

2
Michael Khalili
var link = $('a').filter(function(index) { return $(this).text() === "Availability"; });
 $(link).hide();
        $(link).removeAttr('href');
1
David Fawzy

申し訳ありませんが、これが上記の誰かの答えと完全に一致する場合、

_   $.fn.equalsText = function (text, isCaseSensitive) {
      return $(this).filter(function () {
         if (isCaseSensitive) {
            return $(this).text() === text
         } else {
            return $(this).text().toLowerCase() === text.toLowerCase()
         }
      })
   }
_

Linkedin検索結果ページコンソールの出力を次に示します。

_$("li").equalsText("Next >", false)
[<li class=​"next">​…​</li>​] // Output

$("li").equalsText("next >", false)
[<li class=​"next">​…​</li>​] // Output

$("li").equalsText("Next >", true)
[<li class=​"next">​…​</li>​] // Output

$("li").equalsText("next >", true)
[] // Output
_

大文字と小文字の区別もサポートされており、:contains()を使用していません

編集（2017年5月22日）：-

_   $.fn.equalsText = function (textOrRegex, isCaseSensitive) {
      return $(this).filter(function () {
         var val = $(this).text() || this.nodeValue
         if (textOrRegex instanceof RegExp) {
            return textOrRegex.test(val)
         } else if (isCaseSensitive) {
            return val === textOrRegex
         } else {
            return val.toLowerCase() === textOrRegex.toLowerCase()
         }
      })
   }
_
1
Vikas Gautam