2010-07-21 4 views
1
A simple tool to store and display texts longer than a few lines. 
The search button<div id="xyz">will highlight all</div> the words matching the name of objects that are members of the classes listed in searchedClasses, 
itself a member of the KeySet class. The highlighted words are hypertext. 

div-xyz 태그로 둘러싸인 문자를 검색하고 싶습니다.
example output.
.... 검색 버튼 특정 태그에 둘러싸인 특정 문자 검색하기

내가 따라 현재의 div 태그 텍스트를 얻을 수 있어요 ..... 모든 단어 강조 표시됩니다.
function myDivHTML(valueName){ 
    if((obj = document.getElementById(valueName)) && obj != null){ 
     return obj.innerHTML; 
    }  
} 

나는 요소의 offsetParent 속성을 시도 -하지만 등등 p 태그 & 내부에있을 수 있습니다 대담한 태그 & 굵은 태그 안에있을 수 div 태그 같은 많은 가능성이있다.

주변 텍스트를 얻으려면 어떻게해야합니까? 제한은 10, 20 자일 수 있습니다.

편집 :

주변 텍스트하는 수단 -> 좌측 텍스트 열 또는 문자 (20) 및 우측 (10 개) 또는 (20) 문자.

+0

"는 주변 텍스트"정의 예. – Tomalak

+0

@Tomalak - 예를 확인하고 질문을 편집하십시오. –

답변

2

이 작업을 수행하는 가장 쉬운 방법은 IMO가 내부 div의 내용을 양쪽에서 모호한 문자열로 래핑 한 다음 전체 단락에 일반 표현식을 사용하여 추가 한 마커를 필요한 문자 수와 함께 측면. 이런 식으로 뭔가 : 이전과 내부 문자열 후

var full, result, 
    // textContent for w3 compliance, innerText for IE 
    txt = "textContent" in document.body ? "textContent" : "innerText", 
    // Get references to both divs and store the current text of `xyz` 
    out = document.getElementById("outer"), 
    xyz = document.getElementById("xyz"), 
    old = xyz[txt]; 

// wrap the inner text with something we can easily search for: 
xyz[txt] = "||||" + xyz[txt] + "||||"; 

// Get the whole text, change the DOM text back to what it was 
full = out[txt]; 
xyz[txt] = old; 

// Find the text with our markers and surrounding text: 
result = /.{0,10}\|{4}.*?\|{4}.{0,10}/.exec(full); 

alert(result[0]); 
// -> "ch button ||||will highlight all|||| the words" 

// Finally, replace your wrapping strings: 
result = result[0].replace(/\|{4}/g, ""); 

alert(result); 
// -> "ch button will highlight all the words" 
는 말과 일치되도록 약간 정규식을 조정할 수 있습니다

,이 전체 단어.


http://www.jsfiddle.net/Sy4rT/

+0

이 자바 스크립트를 모바일 Safari (iPhone)에서 실행할 수 있습니까? –

+0

@sugar : iPhone Safari에서는 작동하지 않아야 할 이유는 없지만 확인해 보겠습니다. ** 수정 ** 잘 작동했습니다. 이론적으로 Javascript와 innerText/textContent를 지원하는 모든 최신 브라우저에서 작동해야합니다. –

+0

OK! 이걸 시험해 볼께. –

관련 문제