1

내가하려는 것은 사용자가 페이지에서 텍스트를 선택하고 강조 표시 한 다음이 선택 항목을로드하고 추가 방문시 강조 표시 할 수있게하는 것입니다 (순전히 클라이언트 측 JavaScript 만 사용하면됩니다. 앞으로이 기능을 Chrome 확장 프로그램에 패키지로 제공).페이지의 텍스트 위치를 기록하는 방법은 무엇입니까?

window.getSelection으로 텍스트를 선택하고 있지만 AFAIK는 선택한 텍스트 (또는 요소)에 대한 색인 또는 배치 데이터를 제공하지 않습니다.

내가 현재 생각할 수있는 유일한 방법은 실제 텍스트를 기록하고 검색하는 것이지만 고유성 문제 (동일한 텍스트 문자열이 주어진 페이지에 여러 번 나타날 수 있음)가 발생합니다. DOM 트리를 위쪽으로 횡단하고 포함 된 요소에 '경로'를 저장하는 방법이 있습니까? (그리고 한 요소 내에서 유일성에 대해서만 걱정할 필요가 있습니까?) 더 좋은 방법이 없다면 나는 행복 할 것입니다.

감사

편집 : http://jsfiddle.net/e3XX6/

+0

그들이 선택한 것을 어떻게 유지할 계획입니까? 또는 귀하의 질문입니까? – Brad

+0

이 문자열을 얻기 위해 지금까지 사용하고있는 코드를 표시 할 수 있습니까? 이 코드는 여러분의 질문에 유용 할 것입니다. [라이브 데모] (http://jsfiddle.net/)가 훨씬 더 유용 할 것입니다. –

+0

브래드 : 상태를 유지하는 방법을 알아 내려고 노력 중입니다. (텍스트가 후속 페이지로드에서 다시 선택해야하는 위치를 알고 있음) @DavidThomas 제안에 감사드립니다. jsfiddle을 추가했습니다. – Zen

답변

2

당신이 getSelection() 방법에 의해 반환 된 selection 개체를 조사 하였다 : 내가 지금 뭐하는 거지 이와 유사한 일이 무엇입니까? 예를 들어, anchorNode 속성이 있으며 차례로 parentElement 속성이 있습니다. 마지막 속성은 텍스트가 포함 된 요소를 알려줍니다.

는 (! 콘솔을 엽니 다) 당신의 바이올린 버전을 참조하십시오 : 당신이 이것을 크롬 확장을 만들려고하고 있기 때문에 http://jsfiddle.net/e3XX6/1/

또한, 난 그냥 선택을 기억하는 HTML5 웹 저장소를 사용하는 것이 좋습니다 것입니다.

+0

감사합니다. (나는'parentElement' 속성을 알지 못했습니다) – Zen

+1

'Selection' 객체에 대한 더 자세한 정보는 https://developer.mozilla.org/en-US/docs/DOM/Selection – maxedison

+0

을 참고하십시오. https://code.google.com/p/rangy/로 이동하십시오. 특히 여러 브라우저에서 범위 작업을 시작해야하는 경우 – maxedison

관련 문제