テキストでリンクを選択(完全一致)


89

jQueryを使用して、ある種のテキストを正確に含むリンクを選択します。例えば:

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

私はこれを試しました:

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

ただし、最初のリンクと2番目のリンクを選択します。ちょうど「これ」を含む最初のリンクが欲しいだけです。どうやってやるの?


回答:


138

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

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

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


5
この場合はどちらでも機能しますが、値とタイプが一致するため、===を使用する傾向があります。つまり、タイプを強制しません。stackoverflow.com/questions/359494/…–
FishBasketGordo

1
あなたが逃したreturn。私はそれを変更しなければなりませんfunction(index) { return (this.text === 'This One') }
Endy Tjahjono '07 / 07/13

さらに、テキストの長さを確認できます。
bestinamir

39

私の同僚は、これを行うための関数を使ってjQueryを拡張しました。

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

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

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

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


28

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

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

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

スピード/効率性に賛成票を投じました。また、.filter(..)内の$ .trim()スペースの必要性を回避します。
JoePC 2018

8

ナリマンの解を次のように変更する必要がありました:

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

それ以外の場合、Chrome(Linux)では機能しませんでした


6

拡張機能を使用していた

$.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');

誰かがこれに遭遇した場合に備えて、共有したかっただけです(、


3

したがって、ナルニアンの答えはかなりうまくいきます。しかし、実際にそれを使用していると、私はいくつかの問題に遭遇しました。これは、要素のテキストの周囲にランダムな空白が時々あるためです。「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;
}

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


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

フィルターに対する他の全員の答えに基づいて何かが足りないように感じますが、 'contains'によって返される要素の配列内の最初のアイテムを選択しないのはなぜですか?

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


彼が望んでいるのが最初のものであることを常に知っているとは限らないため
Cameron

具体的には「最初のリンクが欲しい」という質問です。
Michael Khalili

質問は完全一致を要求し、著者はどの要素が必要かを説明する最初の要素を示します。
dlopezgonzalez 2017年

2

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

$.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
var link = $('a').filter(function(index) { return $(this).text() === "Availability"; });
 $(link).hide();
        $(link).removeAttr('href');

1
回答に説明を追加してください。
のMichałPerłakowski

そのテキストを持つ任意のリンクを選択する最初の行、2行目と3行目あなたがそれらを隠すために、リンクやjQueryのドキュメント内のフィルタで無効にリンク表情で何を行うことができますapi.jquery.com/filter
デヴィッドフォージー

@DavidFawzy-すみません、うーん...何ですか?2行目または3行目はOPの質問とは関係がないと思います。混乱を招くだけです。
jbyrd

2

これが上記の誰かの答えと完全に一致する場合は、

   $.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()
         }
      })
   }
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.