버튼이 텍스트를 강조 표시하지 않습니다.

Question

이 jQuery 스 니펫이 있습니다. 강조 표시 할 변수가 저장되어 있습니다.

var words= ['Sample','count']; 
    var keywords = ['import','public','class','static','void','for','if','else']; 
    $(document).ready(function() { 
    if (#showVariables).click(function(){ 
     var wordsHtml = $('#identifier').html(); 
     $.each(words, function(idx, word) { 
     var reg = new RegExp(word, 'g'); 
     wordsHtml = wordsHtml.replace(reg, '<span class="highlight">' + word + '</span>'); 
     }) 
     $('#identifier').html(wordsHtml); 
    }); 


}); 

이

내가 키워드와 식별자를 강조하기 위해 노력하고 도움이되는 HTML,

<div id="menuDiv"><span id="showVariables" class="button">Variables</span><span id="showKeywords" class="button">Keywords</span></div> 
<div id="codeDiv"> 
<br><span class="keyword">import</span> java.io.*; 
<br> 
<br><span class="keyword">public</span> <span class="keyword">class</span> <span class="identifier">Sample</span> { 

<br>&nbsp;&nbsp;<span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> main(String args[]) { 
<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>int</span> <span class="identifier">count</span> = 0; 

입니다. 내가 틀릴 수도있는 곳?

는 "경우는"더 나은 용어의 부족, 사용자가 클릭을

변경을 수행하는 경우에만 발생없는 따옴표 -

Answer 1

데모http://fiddle.jshell.net/rG6F9/13/ (varaibles 클릭 : 데모

DEMO가

두 배열 "단어"와 "키워드"를 사용 텍스트를 입력하면 HTML에 대한 경고 전후에 표시됩니다.

강조 표시가 여기에서 정상적으로 작동합니다 : http://fiddle.jshell.net/8axss/20/ (나는 HTML을 정리했습니다. LL 스크립트)

안녕은 여러 가지가 해결되지 않습니다 클래스 그렇게 .를 사용

1) $('#showVariables').click(function()

2) .identifier이다.

3) identifier은 이전 샘플의 이전 위치 인 가장 바깥쪽에 배치해야합니다.

나머지는 아래의 Jquery 및 html을 참조하십시오. 이 도움이

희망,

코드

var words = ['Sample', 'count']; 
var keywords = ['import', 'public', 'class', 'static', 'void', 'for', 'if', 'else']; 
$(document).ready(function() { 
    $('#showVariables').click(function() { 
     alert($('.identifier').html()); 
     var wordsHtml = $('.identifier').html(); 
     $.each(words, function(idx, word) { 
      var reg = new RegExp(word, 'g'); 
      wordsHtml = wordsHtml.replace(reg, '<span class="highlight" style="backgroun-color:yellow;">' + word + '</span>'); 

     }) 
      alert(" AFter HTML highlight == " + wordsHtml); 
     $('#identifier').html(wordsHtml); 
    }); 


}); 

HTML

<div id="menuDiv"><span id="showVariables" class="button">Variables</span><span id="showKeywords" class="button">Keywords</span></div> 
<div id="codeDiv"> 
<br><span class="keyword">import</span> java.io.*; 
<br> 
<br><span class="keyword">public</span> <span class="keyword">class</span> <span class="identifier">Sample { 

<br>&nbsp;&nbsp;<span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> main(String args[]) { 
<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>int</span> <span class="identifier">count</span> = 0; 
</span> 

Answer 2

문제는 선택을위한 "클릭하면"및 구문도 잘못이없는 것입니다 : 편집

if (#showVariables).click(function(){ 

$('#showVariables').click(function(){ 

하는 방법 : 코딩은 다양한 배열을 전달하는 방법 같은 하이라이트 기능. 예약어 '클래스'와 http://fiddle.jshell.net/dxPhK/

여전히 사소한 문제 정규식에 pased되고

var words = ['Sample', 'count']; 
var keywords = ['import', 'public', /*'class',*/ 'static', 'void', 'for', 'if', 'else']; 
$(document).ready(function() { 
    $('#showVariables').click(function() { 
     $('.identifier').each(function(idx, el) { 
      var $el=$(el) 
      $el.html(hightLightHtml($el.html(), words, 'red')); 
     }) 
    }); 
    $('#showKeywords').click(function() { 
     $('.keyword').each(function(idx, el) { 
      // console.log(idx) 
      var $el=$(el) 
      $el.html(hightLightHtml($el.html(), keywords, 'yellow')); 
     }) 
    }); 


}); 


function hightLightHtml(wordsHtml, wordsArray, highlightClass) { 
    $.each(wordsArray, function(idx, word) { 
     var reg = new RegExp(word, 'g'); 
     wordsHtml = wordsHtml.replace(reg, '<span class="' + highlightClass + '" >' + word + '</span>'); 
    }) 
    return wordsHtml; 
}