태그 안의 텍스트를 강조 표시하는 방법은 무엇입니까?

Question

웹 애플리케이션을 개발 중입니다. 기사를 빨리 검색 할 수있는 기능이 있습니다. 두 단어 구조에서는

이다 : AJAX 의해 페치 아티클

• 페이지
• 전역 배열 (JSON, 100-150 항목). (필드 : ID, 제목, 스 니펫). 제목 & 스 니펫에는 간단한 스타일 마크 업 태그가 포함될 수 있습니다.

그래서, 때 팝업 - 빠른 검색 필드에서 사용자 유형의 쿼리, 응용 프로그램

1. 전역 배열에서 검색
2. 만약 발견 일치, push (캐시) 임시 검색 결과 배열
3. 강조 표시합니다 임시직과 일치합니다. 결과 배열 및 사용자에게 보여주기

원본 배열은 수정되지 않았습니다.

Currenty 나는 원시 String.indexOf를 사용하고 있지만, html 태그 텍스트 (아래 예)를 통해 포맷 내에서 텍스트를 일치하지 않을 수 있습니다

질문 정규식 패턴에 관한 것입니다. 분명히 RegEx를 사용하여 DOM을 조작하는 것은 좋지 않으며 아래 결과가 의미 상 정확하지는 않지만 이 필요합니다.이 필요합니다.

예를 들어

: 우리는 이런 일이 :

<ul><li>Item <i><span style="color:red">Y</span></i></li></ul>

을 우리는 결과를 기대하고, 쿼리 e을 강조해야합니다 ... It<em>e</em>m ...을하지만, 사용 사소한 replace(/e/ig, '<em>$&</em>') 경우도 style="color:red"에서 e을 대체합니다.

즉 태그의 단어를 터치하지 않는 RegEx 패턴은 무엇입니까?

---

두 번째 예 : 우리는 그래서 결과가 <ul><li><em>Item <i><span style="color:red">Y</em></span></i></li></ul>

Answer 1

짧은 hackish 솔루션은 검색 문자열의 모든 단일 문자 사이에 마크 업을 찾는 것입니다이다 기대 Item Y을 강조 할 필요가있다.

(s)(<[.^>]*>)*(e)(<[.^>]*>)*(a)(<[.^>]*>)*(r)(<[.^>]*>)*(c)(<[.^>]*>)*(h)

을하지만 실제로는 그것보다 더 많은 일을하기 때문에 필요 : 키워드는 '검색'인 경우는 같을 것이다

• 스크립트
• 텍스트 영역을
• display:none , visibility:hidden, 등

Answer 2

ood 올바르게, 당신은 DOM 트리의 조각의 텍스트 내용 내에서 검색해야합니다. 이를 달성하는 한 가지 방법은 XML/HTML 텍스트 내용을 사용하는 것입니다. 이 예제는 jQuery를 사용한다, 그러나 아이디어는 다른 libs와 쉽게 휴대가 :

HTML :

<div id="article_contents"> 
Blah blah blah, Item 1, Item 2 blah blah <b>Ite</b>m <span>1</span> blah blah 
</div> 

자바 스크립트 :

var source = jQuery('#article_contents').text(); 
var queryRegexp = new RegExp ('Item 1', 'g'); 
var results = source.match (queryRegexp); 

지금 results가 검색 문자열의 모든 발행 수를 개최한다. 물론 결과 강조 표시의 목표를 달성하려면 몇 단계를 더 거쳐야합니다 (RegExp.exec를 사용하여 일치 항목의 오프셋을 가져 오는 것과 같습니다).