내용과 정확하게 일치하는 요소 선택

내용과 정확하게 일치하는 요소 선택

좋아요, 저는 그 방법이 무엇인지 궁금합니다.:contains()입력된 문자열만으로 요소를 선택하는 jQuery의 선택기

예를 들어 -

<p>hello</p>
<p>hello world</p>

$('p:contains("hello")').css('font-weight', 'bold');

셀렉터가 두 가지를 모두 선택합니다.p요소를 과감히 만들되 첫 번째 요소만 선택했으면 합니다.

아니요, 그렇게 하는 jQuery(또는 CSS) 셀렉터는 없습니다.

다음을 쉽게 사용할 수 있습니다.

$("p").filter(function() {
    return $(this).text() === "hello";
}).css("font-weight", "bold");

선택기는 아니지만 할 수 있습니다 :-)

"hello" 앞이나 뒤에 공백을 처리하려면 다음을 입력합니다.

return $.trim($(this).text()) === "hello";

너무 이른 옵티마이저들의 경우, 그것이 일치하지 않는 것을 신경쓰지 않는다면,<p><span>hello</span></p>그리고 비슷하게, 당신은 당신에게 전화하는 것을 피할 수 있습니다.$그리고.text을 이용하여innerHTML직접:

return this.innerHTML === "hello";

...하지만 중요한 것은 문단이 많아야 다른 문제가 먼저 발생할 수 있습니다. :-)

의사 함수 확장을 추가해 봅니다.

$.expr[':'].textEquals = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().match("^" + arg + "$");
    };
});

그러면 다음을 수행할 수 있습니다.

$('p:textEquals("Hello World")');

이를 위해 jQuery의 filter() 함수를 사용할 수 있습니다.

$("p").filter(function() {
// Matches exact string   
return $(this).text() === "Hello World";
}).css("font-weight", "bold");

아만두의 대답은 대부분 효과가 있습니다.하지만 야생에서 그것을 사용하면서, 저는 제가 발견할 것이라고 예상했던 것들이 발견되지 않는 몇 가지 문제들에 부딪혔습니다.이는 때때로 요소의 텍스트를 둘러싼 무작위한 흰 공간이 존재하기 때문입니다."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;
}

또한 이 답변은 텍스트별 링크 선택(정확한 일치)과 매우 유사합니다.

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

저에게 맞는 방법을 찾았습니다.100% 정확하지는 않지만 개별 공간이 포함되지 않은 문자열도 확인하기 때문에 원하는 단어 이상의 문자열을 모두 제거합니다.그런데 당신은 이것들이 필요하지 않습니다. jQuery는 당신이 문자열을 찾고 있다는 것을 알고 있습니다.:contains( ) 부분에 공백이 하나만 있는지 확인하십시오. 그렇지 않으면 작동하지 않습니다.

<p>hello</p>
<p>hello world</p>
$('p:contains(hello):not(:contains( ))').css('font-weight', 'bold');

그리고 네, 만약 당신이 이런 것을 가지고 있다면 효과가 없을 거라는 것을 압니다.<p>helloworld</p>

위에서 언급한 T.J. 크라우더처럼 필터 기능은 놀라운 기능을 합니다.저의 구체적인 경우에는 효과가 없었습니다.div(이 경우 jQuery 대화 상자) 내부에서 여러 테이블과 해당 td 태그를 검색해야 했습니다.

$("#MyJqueryDialog table tr td").filter(function () {
    // The following implies that there is some text inside the td tag.
    if ($.trim($(this).text()) == "Hello World!") {
       // Perform specific task.
    }
});

저는 이것이 누군가에게 도움이 되기를 바랍니다!

jQuery의 대체 라이브러리와 함께 작동하는 원-라이너:

$('p').filter((i, p) => $(p).text().trim() === "hello").css('font-weight', 'bold');

jQuery 의입니다에 합니다.a:contains("pattern")선택기:

var res = $('a').filter((i, a) => $(a).text().match(/pattern/));

.first()가 여기에 도움이 됩니다.

$('p:contains("hello")').first().css('font-weight', 'bold');

언급URL : https://stackoverflow.com/questions/15364298/select-element-by-exact-match-of-its-content