HTML에서 전체 텍스트 검색 태그 무시/&

최근에 HTML 페이지에서 용어를 검색하고 강조 표시하기 위해 많은 라이브러리를 보았습니다. 그러나, 내가 본 모든 라이브러리는 동일한 문제를 가지고 있으며, 부분적으로 html 태그로 싸인 된 텍스트를 찾지 못하거나, &- 표현 된 특수 문자를 찾지 못합니다.HTML에서 전체 텍스트 검색 태그 무시/&

예 A :

<span> This is a test. This is a <b>test</b> too</span>

"테스트"에 대한 검색은 첫 번째 인스턴스가 아닌 초를 찾아 낼 것입니다.

예 B :

<span> Pencils in spanish are called l&aacute;pices</span>

"lápices"또는 "lapices"은 검색 결과를 생성하지 못할 것이다.

이러한 작업을 수행하는 JS 라이브러리가 있거나 이러한 장애물을 우회하는 방법이 있습니까?

미리 감사드립니다.

브루노

출처

2011-05-04 Bruno

는 [mark.js] (https://markjs.io) 시도 'acrossElements' 옵션이 있습니다 – dude

IE가 아닌 브라우저에서는 window.find()을, IE에서는 의 findText() 메서드를 사용할 수 있습니다.

http://jsfiddle.net/xeSQb/6/

불행하게도 오페라는 이전 버전 15의 깜박임 렌더링 엔진 스위치에 window.find 또는 TextRange 중 하나를 지원하지 않습니다 다음은 예입니다.http://rangy.googlecode.com/svn/trunk/demos/textrange.html

코드 :

function doSearch(text) { 
    if (window.find && window.getSelection) { 
     document.designMode = "on"; 
     var sel = window.getSelection(); 
     sel.collapse(document.body, 0); 

     while (window.find(text)) { 
      document.execCommand("HiliteColor", false, "yellow"); 
      sel.collapseToEnd(); 
     } 
     document.designMode = "off"; 
    } else if (document.body.createTextRange) { 
     var textRange = document.body.createTextRange(); 
     while (textRange.findText(text)) { 
      textRange.execCommand("BackColor", false, "yellow"); 
      textRange.collapse(false); 
     } 
    } 
}

출처

2011-05-04 17:53:30

매력처럼 작동합니다. 범위에 대한 반복은 여러 결과가있는 경우 조금 느릴 수 있지만 중요한 문제는 아니라고 생각합니다. 또한 필요한 부분을 정확히 수행합니다. 두 엄지 손가락. – Bruno

이 코드의 한 가지 (아주) 사소한 결함은 현재 커서 위치부터 검색한다는 것입니다. 따라서 사용자가 텍스트를 강조 표시하고 단추를 클릭하면 사용자의 강조 표시 이후에 검색이 시작됩니다. 이상적으로는 find() 호출 전에 커서를 맨 위로 가져 가야하는 호출이 있어야합니다. – Bruno

@ 브루노 : 좋은 지적입니다. 나는 그것을 지금 추가 할 것이다 ... –

여기에는 2 가지 문제가 있습니다. 하나는 중첩 된 콘텐츠 문제이거나 요소 경계를 지나는 검색 일치입니다. 다른 하나는 HTML 이스케이프 문자입니다.

HTML 이스케이프 된 문자를 처리하는 한 가지 방법은 jQuery를 사용하는 경우 .text() 메서드를 사용하고 검색을 실행하는 것입니다. 그것으로부터 되돌아 오는 텍스트는 이미 실제 문자로 "번역 된"이스케이프 된 문자를 가지고 있습니다.

이러한 특수 문자를 처리하는 또 다른 방법은 실제 문자 (검색 문자열에서)를 이스케이프 된 버전으로 바꾸는 것입니다. 그러나 거기에는 다양한 가능성이 있으므로 구현에 따라 긴 검색이 될 수 있습니다.

같은 종류의 "텍스트"방법을 사용하여 엔티티 경계를 확장하는 내용 일치를 찾을 수 있습니다. "텍스트"에는 컨텐트의 실제 부분이 어디에서 왔는지에 대한 개념이 없기 때문에 까다로워 지지만, 드릴하면 검색 할 때 더 작은 도메인을 제공합니다. 가까이에 있으면 더 많은 "일련의 문자"단어 기반 검색보다는 검색의 일종.

그러나 이렇게하는 라이브러리를 모른다.

출처

2011-05-04 17:03:31 cdeszaq

-2

그냥 언론이 당신을 위해 우려가있는 경우, 오히려 헤비급 대안은 다음과 데모처럼, 내 Rangy 라이브러리의 TextRange 및 CSS class applier 모듈의 조합을 사용하는 것입니다 F3을 입력하고 <p> 및 </p> 명령을 사용하여 다른 사용자에게 귀하의 사이트를 알리십시오. 예를 들면 : 당신이 있습니다 .. F3 검색 버튼의 지식은 그래서 당신이 입력합니다 다른 사람에게 화면에 텍스트를 넣어해야

<p><h4>If your having trouble finding something press F3 to highlight the text<h4></p>

출처

2015-02-17 02:22:40 Hacker17

HTML에서 전체 텍스트 검색 태그 무시/&

답변

관련 문제