텍스트별 링크 선택(정확히 일치)

텍스트별 링크 선택(정확히 일치)

jQuery를 사용하여 정확히 어떤 종류의 텍스트가 포함된 링크를 선택하고자 합니다.예:

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

시도해 본 적이 있습니다.

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

하지만 첫 번째와 두 번째 링크를 선택합니다.저는 단지 "This One"이 정확히 포함된 첫 번째 링크를 원합니다.내가 어떻게 그럴 수 있을까?

다음을 수행할 수 있습니다.

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

참조: http://api.jquery.com/filter/

제 동료는 다음과 같은 기능으로 jQuery를 확장했습니다.

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

결과적으로 다음과 같은 방법으로 정확한 텍스트로 무언가를 선택할 수 있습니다.

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

이렇게 하면 매번 정확한 구문을 기억할 필요가 없기 때문에 쉽게 할 수 있습니다.그의 전체 게시물은 여기에 있습니다: 정확한 텍스트로 요소를 선택하기 위한 jQuery Custom Selector:textEquals

FishBasket Gordo의 답변에 대해 자세히 설명합니다.많은 양의 요소를 선택하려는 경우:contains()먼저 범위를 좁힌 다음 필터를 적용합니다.

이렇게 하면 전체 속도가 향상됩니다.

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

나리만의 솔루션을 다음과 같이 수정해야 했습니다.

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

그렇지 않으면 크롬(리눅스)에서 작동하지 않았습니다.

나는 내선 번호를 사용하고 있었습니다.

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

그냥 공유하고 싶었어요, 만약 다른 사람이 이것에 부딪힐 경우를 대비해서요, ,

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

필터링에 대한 다른 모든 사용자의 답변에 따라 뭔가 누락된 것처럼 느껴지지만 '포함'에 의해 반환되는 요소의 배열 내에서 첫 번째 항목을 선택하는 것이 어떻습니까?

이것은 첫 번째 링크가 찾고 있는 것과 정확히 일치한다는 것을 알고 있는 경우에만 작동합니다.링크의 순서를 잘 모를 경우 다른 답변이 더 잘 작동합니다.

그래서 나리안의 대답은 꽤 효과가 있습니다.하지만 야생에서 그것을 사용하면서, 저는 제가 발견될 것이라고 기대했던 것들이 발견되지 않는 몇 가지 문제에 부딪혔습니다.이것은 때때로 요소의 텍스트를 둘러싼 임의의 공백이 있기 때문입니다."Hello World"를 검색하는 경우에도 "Hello World" 또는 "Hello World\n"과 일치하기를 원할 것이라고 생각합니다.그래서 주변의 공백을 제거하는 "트림()" 방법을 함수에 추가했더니 더 잘 작동하기 시작했습니다.또한 변수 이름을 조금 더 알기 쉽게 수정했습니다.

구체적으로...

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

그리고 부차적인 메모는...자르기는 검색된 텍스트 앞과 뒤의 공백만 제거합니다.이것은 단어 중간에 공백을 제거하지 않습니다.저는 이것이 바람직한 행동이라고 생각하지만, 당신이 원한다면 그것을 바꿀 수 있습니다.

드롭다운에서 선택한 값을 가져오는 방법:

$.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"));합니다.

var link = $('a').filter(function(index) { return $(this).text() === "Availability"; });
 $(link).hide();
        $(link).removeAttr('href');

죄송합니다, 만약 위의 누군가의 대답과 정확히 일치한다면,

   $.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()
         }
      })
   }

언급URL : https://stackoverflow.com/questions/6673777/select-link-by-text-exact-match