2012-01-31 3 views
2

나는 이것에 대해 약간의 변화를 보았지만 문제점과 가장 최근의 성공적인 코드를 게시 할 것입니다.많은 정규식과 일치 및 강조 표시

숭고한 텍스트에 익숙하다면 훨씬 더 빨리 이해할 수 있습니다. 그렇지 않다면, 설명을 위해 최선을 다할 것이지만, 프로그램을 부수적으로 추천 할 것입니다.

목표는 검색 문자열이 주어진 제목을 일치시키고 일치 항목을 강조 표시하는 것입니다. 캐치는 매치가 임의의 순서로 될 수 있으며, 캐릭터의 시작을 의미하지 않으며, 문자열

예는 원래의 입력에서 공간에 의해 분리되어 있음 :

String to Match: "Hello World" 

Does it match? 
"hello" -> Yes! 
"h w" -> Yes! 
"el orl" -> Yes! 
"World Hello" -> Yes! 
"Hello Foo" -> No! 

그래서 입력은 매우 관대합니다. 나는 텍스트를 일치시킬 수있는 지점까지 가지고 있으며 그 결과를 보여줄지 여부를 결정한다. 나는 단지 일하기 위해 강조 표시를 얻는 것에 막혔다. 내가 여기에 잘못된 접근 방식을 가지고 있지만 될 수있다 내가 가진 무엇 :

$('#sdfilter').live('keyup change', function() { 
    var inText = $(this).val().trim(); //remove trailing whitespace 
    var blocks = $('.listing'); //blocks to loop through 

    $.each(blocks, function() { 
     var title = $(this).children('.title').text(); //the title in the block 
     if (matchAll(title, inText)) { 
      $(this).show(); 
     } else { 
      $(this).hide(); 
     } 
    }) 

}) 

matchAll = function(string, args) { //string= string to match, args= search input 
    var die = 0; //return switch 
    var checks = args.split(' '); //break input into array 
    $.each(checks, function() { 
     var myReg = new RegExp(this, 'i'); //search term to regex 
     if (!string.match(myReg)) { //if it doesn't match, kill the function 
      die = 1; 
     } 
    }) 

    if (die == 1) { 
     return false; 
    } else { 
     return true; 
    } 
} 

은 내가이 <span> 태그를 추가 할 $.each(checks, function() {...}) 루프를 withing에 대체 일을 시도했습니다,하지만 입력 문자열은 같은 범위 태그 자체를 일치 주변 루프.

나는 아주 가깝지만, 내가 바라는만큼 동적 인 해결책을 찾지 못했습니다. 그래서 내 공식 질문은 : 나는 올바른 방향으로 움직이고 있는가? 그렇다면 내가 무엇을 놓치고 있니?

편집

미안 해요, 내가 충분히 밝혀지지 않았다 같아요. 나는 앞으로 나아가는 방법을 알아야 일치하는 것을 강조 할 것입니다. 예를 들어 위의 사용과 '[]'

String to Match: "Hello World" 

Does it match? 
"hello" -> Yes! -> "[Hello] World" 
"h w" -> Yes! -> "[H]ello [W]orld" 
"el orl" -> Yes! -> "H[el]lo W[orl]d" 
"World Hello" -> Yes! -> "[Hello] [World]" 
"Hello Foo" -> No! -> **hidden 

강조 표시가 span 태그

편집의 일치를 포장하여 수행됩니다 강조 나타 내기 위해 2

else가 같은 string = string.replace(myReg, '<span>' + this + '</span>') 뭔가를 (시도 statement to if (!string.match(myReg))) 나는 <span> 요소 자체가 일치되도록 끝낸다. 나는 동일한 입력이 반복적으로 반복되기 때문에 이것이 예상 될 수 있다고 생각한다. myReg에서 제외시키는 방법이 있습니까? 참조 작은 코드 블록이와

... 
$.each(checks, function() { 
     var myReg = new RegExp(this, 'i'); //search term to regex 
     if (!string.match(myReg)) { //if it doesn't match, kill the function 
      die = 1; 
     } else { 
      string = string.replace(myReg, '<span>' + this + '</span>'); 
     } 
    }) 
... 
+0

나에게 좋아 보인다. 예상대로 작동하지 않는 것이 있습니까? – woohoo

+0

강조 표시 없음 :( –

+0

'matchAll' 메서드가 원하는대로 작동하지 않는 것 같습니다. 목표를 달성했다면 true를 반환하면 안됩니까? matchAll ("hw", "Hello World")' 첫 번째 인수는 테스트하는 문자열이고 두 번째 인수는 일치하는 문자열입니다. 맞습니까? 일치시킬 수있는 대상과 그렇지 않은 대상에 대해 좀 더 구체적으로 설명 할 수 있습니까? 게시 한 내용에서 보면 각 단어의 적어도 하나의 문자와 일치 시키려합니다. –

답변

0

나의 이해는 영업 이익은 입력 된 값은 경우에 모두가 일치하는 것으로 간주되어 다음 "문자열 일치"라는 점이다.

나는 바이올린을 만들었습니다 here. 주요 수정점은 .text()입니다. 나는 당신이 무슨 일이 일어나는지를 알 수 있도록 코드에 주석을 달았다.

+0

놀라운. 나는 희망을 잃기 시작했다. ".title"클래스와 일치하도록 약간 수정해야했습니다. 블록에 다른 텍스트가 있기 때문에 일치하지 않으려합니다. 그것 이외에, 그것은 아름답게 일했다! –

+0

오, 안돼! 그것에 버그를 발견했습니다! 일시적으로 허용 된 답변을 삭제합니다. 죄송합니다. http://jsfiddle.net/kmacey1249/JYsJU/7/ "He green"이라는 검색어를 사용하십시오. –

+0

@KyleMacey 나는 바이올린을 업데이트했습니다. 지금은 문제가 보이지 않습니다. – sinemetu1