JavaScript (html)

Question

을 사용하여 특정 문자가 발생하기 전후의 모든 것을 제거하는 방법 그래서, 일부 HTML 코드를 가져 와서 입력 양식 아래에 표시하는 "사용자 정의"검색 막대가 있습니다. 들어오는 HTML이 양식에 있습니다

을 내가 입력 할 때 "바는"나는 검색 창에서이 결과를 얻을 :

그래서

는, 기본적으로 내가 켜려는를 "33 | balloon Rides Daily (1)"을 "Balloon Rides Daily"로 가져 가려면 어떻게해야합니까? 감사!

전체 코드 :

<form> 
     Search: 
     <input type="text" id="searchbar"> 
     <br> 
    </form> 

    <div id="result"></div> 

    <script> 
     var term; 

     $('#searchbar') 
      .bind('keyup', function(e) { 
       term = $(this).val(); 
       document.getElementById("result").innerHTML = ""; 
       console.log(term); 
       getTags(); 
      }); 

     function getTags() { 
      $.get("myaspscript", { 
       needle: term 
      }, function(data, status) { 
       tags = data.split(", "); 
       $(result).html(data); 
       $($(result).find('ol').get().reverse()).each(function() { 
        $(this).replaceWith($('<ul>' + $(this).html() + '</ul>')) 
       }) 
      }); 
     } 
    </script> 
</body> 

편집 html로 보이는 방법

: 당신이 게시 할 수있는 경우 http://jsfiddle.net/gk2ud9fL/2/

Answer 1

UPDATE :.을 감안할 때, 여러분의 의견과 코드의보다 철저한 읽기 몇 가지 문제가있는 것 같습니다.

1) 키를 놓을 때마다 목록을 다시 가져 오지 마십시오. 그것은 자원을 낭비합니다. 한 번만 목록을 가져오고 그 데이터를 가지고 작업하십시오.

2) 데이터를 제어 할 수 있다면 모든 목록 항목 값의 배열로 JSON 객체를 반환하는 것이 훨씬 쉬울 것입니다. 친숙하지 않다면 그 용어들을 찾아 보도록하겠습니다.

이 모든 내용은 귀하의 경우에 적용됩니다. 첫 번째 정규식 :

/\d+\s\|\s(.*) \(\d+\)/g 

이것은 사용자가 얻으려고하는 것과 일치합니다. 구현 :

// Credit Shog9♦ here: 
// http://stackoverflow.com/questions/247023/get-an-array-of-list-element-contents-in-jquery 
// Parses the list into an array and changes it's values. 
var optionTexts = []; 
(function changeAndStoreList(){ 
    $("ul li").each(function() { 
     var regex = /\d+\s\|\s(.*) \(\d+\)/g; 
     $(this).text(regex.exec($(this).text())[1]); 
     optionTexts.push($(this).text()); 
    }); 
}());     

// Search as we type 
$('#searchbar').bind('keyup', function (e) { 
    document.getElementById("result").innerHTML = ""; 
    if ($(this).val() !== "") { 
     $("#result").text(search($(this).val(), optionTexts)); 
    } 
}); 

// Simple search funcion 
function search(needle, haystack) { 
    for (var i = 0; i < haystack.length; i++) { 
     if (haystack[i].match(needle)) { 
      return haystack[i]; 
     } 
    } 
    return false; 
} 

이 코드는 목록을 값의 배열로 구문 분석하여 작업하기 쉽고 멋지게 만듭니다. 그런 다음 각 키 누르기에서 해당 배열을 검색하고 결과를 표시합니다.

Here's a fiddle to prove concept

Answer 2

그 실제 HTML 코드에서 가져온되고있다. 그렇지 않으면 목록의 모든 항목 앞에서이 작업을 수행하십시오.

1. html에 들어있는 실제 문자열을 html과 분리하려면 split ('char');
2. 이제 분리 된 문자열을 | .과 (
3. 출력 결과 배열 안에있는 올바른 문자열 다시

이는 HTML 코드를 보지 않고있다