2011-12-17 1 views
3

나는 contentEditable DIV (일종의 편집기 구성 요소)를 가지고 있습니다. 나는 사용자가 입력하고있는 현재 단어와 그 단어가있는 문장을 강조하는 방법을 찾고있다. 예를 들어, 다음 단락을 고려 : 캐럿이 첫 문장에서 단어 '샘플'에있는 경우 지금contentEditable DIV에서 현재 단어 및 문장을 강조 표시하는 방법은 무엇입니까?

I am a sample paragraph. I contain words that dont make much sense but are there just to fill the space. I can have only one caret at a time. ... 

을, 나는 단어 ('샘플')과 문장 ('나는 오전을 강조 할 견본 단락. '). 유사하게 두 번째 문장에서 'sense'라는 단어에 캐럿이있는 경우 해당 단어 자체와 두 번째 문장은 강조 표시가 있어야합니다. 강조 표시는 현재 문장의 밝은 배경색을 의미하며 현재 단어가 더 눈에 띄는 배경색을 갖습니다.

이 기술을 구현하는 기술은 무엇입니까? 나는 문장을 각각 <span class="sentence">..</span>과 각 문장 안의 단어를 <span class="word">..</span>으로 분리하려고 노력했다. 하지만 그것은 클립 보드 등에서 물건을 붙여 넣을 때 너무 많은 고통입니다. 나는 또한 현재 단어와 현재 문장을 찾고 이동 중에도 수업을 적용하기 위해 전체 텍스트를 통해 캐럿 위치를 찾고 앞뒤로 움직이는 것을 생각했습니다. 타이핑 경험을 부진하고 오히려 잊어 버릴 수있는 느낌을 갖습니다.

아이디어가 부족합니다. 어떤 도움이라도 대단히 감사하겠습니다.

감사합니다.

+0

나는 잠시 동안이 일을해야한다는 것을 의미합니다. 너에게 다시 돌아갈 게. –

+1

나는 너의 호기심 많은 뚱뚱한 팬이다. 사실 그것이 현재 작업의 기초입니다. 사실 나는 다른 커뮤니티 사용자 중 몇 명에게 여기까지의 호응을 추천했습니다. 이 토론에 참여해 주셔서 대단히 감사합니다. – techfoobar

+0

@TimDown - 관련 일을 할 기회가 있었습니까? 그렇다면 정보를 공유하십시오. – techfoobar

답변

2

This jQuery 플러그인은 페이지 (또는 DOM 요소)의 특정 패턴을 강조 표시합니다.

거기에서 onChange 이벤트를 연결하고 현재 캐럿 위치의 텍스트와 일치하는 펑키 정규 표현식을 수행하는 것입니다. 캐럿 위치를 결정하는 jQuery 플러그인도 있습니다 (즉, this).