jQuery "&"의 각 인스턴스를 스왑하는 방법 각 요소에 <span> 태그 추가

Question

제목과 마찬가지로

#wrapper에있는 텍스트를 통해 페이지로드시 검색 할 수 있기를 원합니다.

"&"이 있다면 span 태그가 적용되고 span에 클래스가 추가되기를 원합니다. 예 : "hello & Welcome" 을 찾으면 "hello <span class="amp">&</span> Welcome"처럼 끝나야합니다.

시도해 본 일부 코드가 있었지만 모두 제대로 작동하지 않아서 무의미했습니다. 어떤 도움을 주셔서 감사합니다.

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#wrapper").html($("#wrapper").html().replace(/&amp;/g, '<span class="amp">&amp;<"+"/span>')); 
    }); 
</script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#wrapper").html($("#wrapper").html().replace(/&amp;/g, '<span class="amp">&amp;<"+"/span>')); 
    }); 
</script> 

이 파일은 함수가 아니라는 것을 알려주는 오류와 함께로드됩니다.

$는 함수 $ (문서)가 아닙니다. 준비 (function() {

편집 : oops가 jQuery에 대한 참조를 포함하는 것을 잊어 버렸습니다 ..

이 작품 .

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#wrapper").html($("#wrapper").html().replace(/&amp;/g, '<span class="amp">&amp;<"+"/span>')); 
    }); 
</script> 

Answer 1

jquery.highlight을 보았습니까? 올바른 방법 (텍스트 노드 내에서만 검색 등)

$("#wrapper").highlight('&'); 

조금 더 자세히 설명합니다. 다음과 같은 시나리오를 상상해 :

<div id='wrapper'>This &amp; should become highlighted. 
    And a picture: <img src='momanddad.jpg' alt='Mom &amp; Dad' /></div> 

담요의 정규 표현식 그 & 발생 모두를 잡을 것입니다 교체와 함께 반환이 분명히 당신의 IMG 태그를 깰 것입니다

<div id='wrapper'>This <span class="amp">&amp;</span> should become highlighted. 
    And a picture: <img src='momanddad.jpg' alt='Mom <span class="amp">&amp;</span> Dad' /></div> 

. jquery highlight 플러그인은이를 피할 수 있습니다.

Answer 2

읽기 쉽게하기 위해 다시 생각해 보겠습니다.

var html = $("#wrapper").text().replace(/&/g,'<span class="amp">&</span>'); 
$("#wrapper").html(html); 

DOM에 대한 추가 호출이라고 가정합니다.