jQuery를 사용하여 텍스트 문자열을 찾으십니까?

웹 페이지에 찾고 싶은 "단순 문자열"과 같은 문자열이 있다고 가정합니다. JQuery를 사용하여 어떻게해야합니까?

jQuery에는 contains 메소드가 있습니다. 다음은 스 니펫입니다.

<script type="text/javascript">
$(function() {
    var foundin = $('*:contains("I am a simple string")');
});
</script>

위의 선택기는 대상 문자열이 포함 된 요소를 선택합니다. foundin은 일치하는 요소를 포함하는 jQuery 객체입니다. https://api.jquery.com/contains-selector/ 에서 API 정보를 참조하십시오.

'*'와일드 카드를 사용하여주의해야 할 점은 HTML을 포함하여 원하지 않는 body 요소를 포함한 모든 요소를 ​​얻는다는 것입니다. 그래서 jQuery와 다른 곳에서 대부분의 예제가 $ ( 'div : contains ( "I is a simple string")')

일반적으로 jQuery 선택기는 DOM의 "텍스트 노드"내에서 검색하지 않습니다. 그러나 .contents () 함수를 사용하면 텍스트 노드가 포함되며 nodeType 속성을 사용하여 텍스트 노드 만 필터링하고 nodeValue 속성을 사용하여 텍스트 문자열을 검색 할 수 있습니다.

    $ ( '*', '본문')
        .andSelf ()
        .내용()
        .filter (함수 () {
            this.nodeType을 반환 === 3;
        })
        .filter (함수 () {
            // 텍스트의 아무 곳에 나 '단순 문자열'이 포함 된 경우에만 일치
            이것을 돌려줍니다. nodeValue.indexOf ( 'simple string')! = -1;
        })
        .each (function () {
            // this.nodeValue로 무언가를하십시오
        });

"I am a simple string"을 포함하는 리프 요소 만 선택합니다.

$('*:contains("I am a simple string")').each(function(){
     if($(this).children().length < 1) 
          $(this).css("border","solid 2px red") });

주소 표시 줄에 다음을 붙여 넣어 테스트하십시오.

javascript: $('*:contains("I am a simple string")').each(function(){ if($(this).children().length < 1) $(this).css("border","solid 2px red") }); return false;

방금 잡아하려면 "나는 간단한 문자열입니다" . 먼저 텍스트를 같은 요소로 감싸십시오.

$('*:contains("I am a simple string")').each(function(){
     if($(this).children().length < 1) 
          $(this).html( 
               $(this).text().replace(
                    /"I am a simple string"/
                    ,'<span containsStringImLookingFor="true">"I am a simple string"</span>' 
               )  
           ) 
});

그런 다음이 작업을 수행하십시오.

$('*[containsStringImLookingFor]').css("border","solid 2px red");

검색하려는 텍스트와 가장 가까운 노드를 원하면 다음을 사용할 수 있습니다.

$('*:contains("my text"):last');

HTML이 다음과 같은 경우에도 작동합니다.

<p> blah blah <strong>my <em>text</em></strong></p>

위의 선택기를 사용하면 <strong>전체 문자열을 포함하는 마지막 태그이므로 태그를 찾습니다.

하이라이트 (jQuery 플러그인)를 살펴보십시오 .

Tony Miller의 답변에 추가하면 내가 찾고있는 것에 대해 90 %를 얻었지만 여전히 작동하지 않습니다. .length > 0;그의 코드 끝에 추가하면 스크립트가 작동합니다.

 $(function() {
    var foundin = $('*:contains("I am a simple string")').length > 0;
 });

이 기능이 작동합니다. 기본적으로 리프 노드의 고유 목록을 얻을 때까지 기본적으로 재귀 조회를 수행합니다.

function distinctNodes(search, element) {
    var d, e, ef;
    e = [];
    ef = [];

    if (element) {
        d = $(":contains(\""+ search + "\"):not(script)", element);
    }
    else {
            d = $(":contains(\""+ search + "\"):not(script)");
    }

    if (d.length == 1) {
            e.push(d[0]);
    }
    else {
        d.each(function () {
            var i, r = distinctNodes(search, this);
            if (r.length === 0) {
                e.push(this);
            }
            else {
                for (i = 0; i < r.length; ++i) {
                    e.push(r[i]);
                }
            }
        });
    }
    $.each(e, function () {
        for (var i = 0; i < ef.length; ++i) {
            if (this === ef[i]) return;
        }
        ef.push(this);
    });
    return ef;
}