JQuery 문자열의 스타일 찾기 및 변경

HTML 페이지의 모든 내용을 특정 문자열로 검색하여 찾은 다음 텍스트의 색상을 변경하는 함수를 작성해야합니다.JQuery 문자열의 스타일 찾기 및 변경

이것이 가능합니까?

감사

2012-12-08 lnelson92

당신은 그렇게 할 수

CSS :

.someclass { 
    color: red; 
}

자바 스크립트 : yourstring가 태그 나에있는 경우이 문제를 만들 것이라고

$('p:contains('+yourstring+')', document.body).each(function(){ 
    $(this).html($(this).html().replace(
     new RegExp(yourstring, 'g'), '<span class=someclass>'+yourstring+'</span>' 
)); 
});

주 속성.

Demonstration

하면 문단 (또는 요소가있는 내부 예를 들어, 링크, yourstring 포함 할 수있다)에 핸들러를 연결하기 전에이 코드를 실행하는 데주의해야합니다.

출처

2012-12-08 18:59:10

이 문자열을 포함하는 전체 사업부를 포장하지 않습니다, 단지 >> 찾기 및 문자열의 변화 스타일 문자열 자체? –

@JuanMendes 당신이 의미하는 바가 확실하지 않습니다. –

데모를 추가했습니다 ... 그러나이 방법의 단점은 HTML을 덮어 쓰는 것이므로 교체 된 노드에 핸들러가 있으면 제거했다고 설명합니다. 이상적으로는 텍스트 범위를 찾아 노드를 만들 수 있습니다. –

dystroy의 답변에 문제가 있으면 전체 HTML을 덮어 쓰게되므로 텍스트가 포함 된 노드 내에 처리기가 있으면 제거됩니다.

정확한 해결책은 text ranges을 사용하여 주위의 모든 HTML이 아닌 텍스트 자체 만 업데이트하는 것입니다.

그리고 재미를 위해 Highlight text range using JavaScript을 참조 FF and Chrome 작동하는 기본 방법 window.find있다. 표준에는 없지만 한 번에 하나씩 만 찾습니다. Ctrl + f와 같습니다.

window.find("anything");

출처

2012-12-08 19:23:15

JQuery와 만 붙여 넣기를 복사하고 실행 :

$('#seabutton').click(function() 
     { 
      var sea=$('#search').val(); 
      var cont=$('p').val(); 
      alert(cont); 
      $('p:contains('+sea+')').each(function() 
       { 
    /*   $(this).html($(this).html().replace(new RegExp(sea, 'g'),'<span class=someclass>'+sea+'</span>')); 
    */   $(this).html($(this).html().replace(
         new RegExp(sea, 'i'), '<span class=someclass>'+sea+'</span>' 
       )); 
      }); 

     }); 
     $('p').click(function() 
     { 
      $(".someclass").css("color", "black"); 
     }); 
     $('#search').blur(function() 
     { 
      $(".someclass").css("color", "black"); 

     }); 

    }) 


    </script> 
    <style type="text/css"> 
    .someclass { 
     color: red; 
    } 
    </style> 
    </head> 
    <body> 
    <!-- Select Country:<select id="country" name="country"> 
    </select> 
    <table id="state" border="1"> 


    </table> --> 
    <br> 
    Enter Text:<input type="text" id="search"/><input type="button" id="seabutton" value="Search"/> 
    <div id="serach"> 
    <p>This is ankush Dapke 
    </p> 

    </div> 
    </body> 
    </html>

출처

2015-10-01 10:46:18

JQuery 문자열의 스타일 찾기 및 변경

답변

관련 문제