[JQUERY] 요소에 텍스트 문자열을 찾아 그 둘레에 약간의 범위 태그를 포장

요소에 텍스트 문자열을 찾아 그 둘레에 약간의 범위 태그를 포장

해결법

1. ---

   1.

   $("h2:contains('cow')").html(function(_, html) {
      return html.replace(/(cow)/g, '<span class="smallcaps">$1</span>');
   });
   

   http://jsfiddle.net/w5ze6/1/

2. ---

   2.또 다른 방법, 분할 키워드로하고 업데이트 된 HTML로 가입 할 수 있습니다.

   또 다른 방법, 분할 키워드로하고 업데이트 된 HTML로 가입 할 수 있습니다.

   $("h2:contains('cow')").html(function(_, html) {
      return html.split('cow').join("<span class='smallcaps'>cow</span>");
   });
   

   참고 :이 테스트를하지 않은,하지만 나는 이것이 교체하는 것보다 더 나쁜 수행 할 있으리라 믿고있어,하지만 그림 나는 어쨌든 유익한 목적을 위해 포함 할 것

3. ---

   3.여기서 항목의 배열을 통해 루프의 정의되지 않음 @의 변형이다 :

   여기서 항목의 배열을 통해 루프의 정의되지 않음 @의 변형이다 :

   var barnyardArray = [
       'cow',
       'horse',
       'chicken',
       'hog',
       'goat',
       'goose',
       'duck',
       'llama'
   ];
   
   $.each(barnyardArray, function (index, value) {
       $("p:contains(" + value + ")").html(function (_, html) {
           var regex = new RegExp(value, 'g');
           return html.replace(regex, '<span class="smallcaps">' + value + '</span>');
       });
   });
   

4. ---

   4.당신은 보통의 경우를 구분 방법에 어떤 임의의 텍스트와 일치하고 싶다. 때때로, 검색 쿼리는 특별한 정규식 메타 문자이며 패턴을 컴파일하기 전에 이스케이프해야합니다 문자가 포함되어 있습니다.

   당신은 보통의 경우를 구분 방법에 어떤 임의의 텍스트와 일치하고 싶다. 때때로, 검색 쿼리는 특별한 정규식 메타 문자이며 패턴을 컴파일하기 전에 이스케이프해야합니다 문자가 포함되어 있습니다.

   같은 솔루션을 사용하여

   VAR 워드 = "소", "C ++", "$ VAR을 $"]; $ ( "H2"). html로 (기능 (_, HTML) { 리턴 html.replace (새 정규식 (words.map (함수 (X) { 리턴 x.replace (/ [- \ / $ \\ ^ * +? () | [\ {}] / g '\\ $ &') }) (가입. '|'), "GI"), '<스팬 클래스 = "작은 대문자"> $ & ') }); 스팬 {색상 : 빨강} <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

   우리는 우리의 농장 에 소가

   C ++ 앱 $ var에 $

   C \ + \ + | | 주 여기에, 정규식이 / 소 모양을 +와 $가 특수 정규식 메타 문자는 이스케이프 \ $ var에 \ $ / GI, 그리고 대안이와 OR입니다 | 교대 연산자.

   또한, 기본 그룹 같은 외부 괄호 필요가 없다는 것을 참고는 전체 경기를 보유 그룹 0, 자바 스크립트 정규식에서 그룹 0으로 역 참조는 $ &입니다. 이 텍스트에서 발견되면서 따라서, 교체는 항상 정확한 경우에 검색 단어로 이루어집니다.

   (/ | 경우에만 전체 단어 일치해야하는 것으로 (검색 단어는 항상 문자, 숫자로 구성 또는 _ 경우), 당신은 \ B 중 하나를 특별한 경계를 필요하거나 (^ \ W) (\ w?!) ) 특수 문자가있을 수있는 경우 :

   VAR 워드 = "소", "C ++", "$ VAR을 $"]; $ ( "H2"). html로 (기능 (_, HTML) { 리턴 html.replace (새 정규식 ( "\\ (W | ^) ("+ words.map (함수 (X) { 리턴 x.replace (/ [- \ / $ \\ ^ * +? () | [\ {}] / g '\\ $ &') }) (가입. '|') + "?!) (\\) w") "GI" '$ 1 <스팬 클래스 = "작은 대문자"> $ 2 ') }); 스팬 {색상 : 빨강} <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

   우리는 우리의 농장 외양간 에서 소가

   C ++ 앱 $ var에 $에서 $ var에 $ moretext

5. ---

   5.내 경우에는 내가 대상 DIV 내부의 태그가 일부 텍스트는 내가 링크로 텍스트를 포장해야합니다.

   내 경우에는 내가 대상 DIV 내부의 태그가 일부 텍스트는 내가 링크로 텍스트를 포장해야합니다.

   이것은 내가 "당신이 시도 무엇"다음 않았다 방법에 대해 설명합니다.

   var oldText = $(this).text(),
   newText = $(this).html().replace(
       oldText, 
       "<a class='k-link' href='#' class='smallcaps'>" + 
           oldText + 
       "<span class='k-icon k-i-arrow-n'></span></a>"
   );
   $(this).html(newText);
   

6. ---

   6.

   $("h2:contains('cow')").each(function() {
       var newText = $(this).html().replace("cow", "<span class='smallcaps'></span>");
       $(this).html(newText);
   });
   

from https://stackoverflow.com/questions/16090487/find-a-string-of-text-in-an-element-and-wrap-some-span-tags-round-it by cc-by-sa and MIT license