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

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

웹 페이지에 찾으려는 "나는 단순 문자열입니다"와 같은 문자열이 있다고 가정합니다.JQuery를 사용하여 이 작업을 수행하려면 어떻게 해야 합니까?

jQuery에는 포함 메서드가 있습니다.다음은 여러분을 위한 스니펫입니다.

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

위의 선택기는 대상 문자열을 포함하는 요소를 선택합니다.일치하는 요소를 포함하는 jQuery 개체입니다.API 정보는 https://api.jquery.com/contains-selector/ 에서 확인할 수 있습니다.

'*' 와일드카드에서 한 가지 주의할 점은 HTML 본문 요소를 포함한 모든 요소를 얻을 수 있다는 것입니다.그렇기 때문에 jQuery 등에서 대부분의 예제는 $('div: contains("I am a simple string"))를 사용합니다.

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

$('*', '본문').및 자신().()contents.filter(함수는 {})반환합니다.nodeType === 3;}).filter(함수는 {})텍스트의 임의의 위치에 '단순 문자열'이 포함된 경우에만 일치이 .nodeValue.indexOf('단순 문자열')를 반환합니다!= -1;}).각(함수는 {})이 노드 값으로 작업을 수행합니다.});

이렇게 하면 "나는 단순 문자열"이 포함된 리프 요소만 선택됩니다.

$('*: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의 답변에 더하여 제가 찾고 있었지만 여전히 작동하지 않는 것에 도달했지만 여전히 작동하지 않았습니다.추가 중.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;
}

언급URL : https://stackoverflow.com/questions/926580/find-text-string-using-jquery