적용 DIV/span 태그

예

<body style="width:300px;"> 
<h3>Long-Text</h3> 
A simple tool to store and display texts longer than a few lines. 
The search button will highlight all 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. 
Edit invokes wscripts/acedb.editor, which by default launches emacs. Edit that file to start another editor in its place. 
Save will recover from the emacs but will not destroy it. 
Read will read a text file, so you could Search it. 
**general** grep is a way to annotate a set of longtexts versus the searchedClasses. It outputs an ace file that you can then hand check and read back in acedb to create XREF from longTexts to genes etc. 
<h3>World Wide NotePad</h3> 
World wide notepad is a small text editor similar to Microsoft's notepad but has some more useful features like an auto typer to make typing the same sentence or word more easy, also World Wide NotePad has a text to speech feature which reads all text in the current open document and speaks it out load to you. 
<h3>Etelka Wide Text Pro Bold Italic</h3> 
</body>

-> "일반"(사이 **) 인에서 X = 0, y = 465. 나는 x, y 위치를 안다. 그러나 특정 위치에있는 단어를 강조 표시하는 방법은 무엇입니까?

다시 한번 설명 드리겠습니다. 위치별로 단어를 강조하고 싶습니다.

예를 들어 위치 값 (x, y) = (0,625)입니다. 그 위치에서 첫 단어를 추출하고 싶습니다. (그 위치에서 우리는 "세계"라는 단어를가집니다.) 그런 단어를 어떻게 강조할까요?

편집 : 여기
Y 좌표는 전체 HTML 문서의 절대 위치이다.

출처

2010-08-04 Sagar R. Kothari

강조 표시를 사용하는 경우이를 선택하거나 예 : 'span' 태그? –

'span 태그에 포장하고 싶습니다 - 예' 세계' –

제목을 읽었어야합니다;) –

내가 생각할 수있는 유일한 방법은 span 요소의 모든 단어를 래핑 한 다음 document.elementFromPoint(x,y)을 사용하여 주어진 위치에서 span 요소를 가져 오는 것입니다. 이런 식으로 뭔가 : http://jsfiddle.net/BSHYp/1/show/light/에서

function highlightWordAtXY(x, y) { 
    // Get the element containing the text 
    var par = document.elementFromPoint(x, y), 
     // textContent or innerText ? 
     t = "textContent" in par ? "textContent" : "innerText", 
     // Get the text of the element. No pun intended on the par[t]. 
     text = par[t], 
     result; 

    // Wrap a span around every word 
    par.innerHTML = text.replace(/\b(\w+)\b/g, "<span>$1</span>"); 

    // Get the elementFromPoint again, should be a span this time 
    result = document.elementFromPoint(x, y); 

    // Check that we actually clicked on a word 
    if (result == par) 
     return false; 

    // Wrap HTML text around the text at x, y 
    result[t] = '<span class="highlight">' + result[t] + '</span>'; 

    // Restore the content with the wrapped text 
    par.innerHTML = par[t]; 
}

예 - 단어를 클릭하고 강조보세요. 여기

몇 가지 중요한주의 사항 : 텍스트의 각 블록 요소 (예 :  또는 <div>)에 싸여해야

. 어쨌든  태그의 단락을 포장해야합니다.
주어진 위치 (x, y)의 요소는 텍스트가 포함되어야합니다. 자식 요소 없음 HTML 요소. 형제 HTML 요소가있는 텍스트 노드는 제거됩니다 (예 : Some text here에서 '일부'또는 '여기'를 클릭하면  태그가 제거됨). 별도의  요소로 나누면 매우에
, 당신이 시도하고  태그에 블록 레벨 요소를 추가하는 경우
IE는 "알 수없는 런타임 오류"가 발생합니다, 훨씬 더 복잡한 루틴을 구축하지 않고 유일한 해결책이 될 것입니다 매우 큰 텍스트 블록으로 인해 성능 문제가 발생할 수 있습니다. 해당되는 경우 해체하십시오.

출처

2010-08-04 11:58:04

와우 :) 훌륭한 하나. 훌륭한. 그냥 샘플 링크를보고. :) –

최고 답변 :) 굉장 :) 스팬 태그의 단어의 작은 조각에 귀하의 전체 단락 나누기 및 그 특정 단어를지고. 굉장한 논리. :) 마지막 질문 - 예를 들어 - 이전 강조 표시를 제거합니다 - 보존하려면 어떻게해야합니까? 귀하의 정규식 및 innerText 완전히 이전 하이라이트를 제거합니다. 주어진 샘플 링크의 –

- 정상 클릭시 이전 하이라이트를 제거합니다. 그러나 여백을 클릭하면 여러 하이라이트가 허용됩니다!: @ # % –

적용 DIV/span 태그

답변

관련 문제