강조 표시 / 선택된 텍스트 가져 오기

351

jQuery를 사용하여 웹 사이트의 단락에서 강조 표시된 텍스트를 얻을 수 있습니까?

javascript jquery textselection

— 단
소스

2

다음은 작동하는 솔루션입니다. dipaksblogonline.blogspot.in/2014/11/…

— Dipak

간단한 자바 스크립트가 나를 위해 일했습니다. document.getSelection (). anchorNode.data.substr (document.getSelection (). anchorOffset, document.getSelection (). focusOffset-document.getSelection (). anchorOffset)

— Rohit Verma

@RohitVerma : 단일 텍스트 노드 내에 포함 된 선택의 간단한 경우에만 작동합니다. 반드시 그런 것은 아닙니다.

— Tim Down

@Dipak 게시물에서 참조하는 블로그에서 소셜 공유 기능을 어떻게 복제합니까? 선택한 문자열을 반환하는 대신 해당 변수를 트위터 링크에 채우려 고합니다.

481

사용자가 선택한 텍스트를 얻는 것은 비교적 간단합니다. window및 document객체 외에 다른 것이 필요하지 않기 때문에 jQuery를 포함하여 얻을 수있는 이점은 없습니다 .

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

선택 <textarea>및 텍스트 <input>요소를 처리하는 구현에 관심이 있다면 다음을 사용할 수 있습니다. 지금은 2016 년 이래로 IE <= 8 지원에 필요한 코드를 생략하고 있지만 SO에 대한 많은 장소에 게시했습니다.

function getSelectionText() {
    var text = "";
    var activeEl = document.activeElement;
    var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
    if (
      (activeElTagName == "textarea") || (activeElTagName == "input" &&
      /^(?:text|search|password|tel|url)$/i.test(activeEl.type)) &&
      (typeof activeEl.selectionStart == "number")
    ) {
        text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
    } else if (window.getSelection) {
        text = window.getSelection().toString();
    }
    return text;
}

document.onmouseup = document.onkeyup = document.onselectionchange = function() {
  document.getElementById("sel").value = getSelectionText();
};

Selection:
<br>
<textarea id="sel" rows="3" cols="50"></textarea>
<p>Please select some text.</p>
<input value="Some text in a text input">
<br>
<input type="search" value="Some text in a search input">
<br>
<input type="tel" value="4872349749823">
<br>
<textarea>Some text in a textarea</textarea>

스 니펫 확장

— 팀 다운
소스

9

{}-포크가 좋은 경우 다른 것은 무엇입니까? "제어"란 무엇입니까?

— Dan

29

@ Dan : 죄송합니다.이 질문을 놓쳤습니다 (SO가 나에게 경고했다고 생각하지 마십시오). 두 번째 분기는 IE <= 8입니다 (IE 9 구현 window.getSelection()). document.selection.type검사는 선택 텍스트 선택보다는 제어 선택이다 시험하고있다. IE에서 컨트롤 선택은 윤곽선 및 크기 조정 핸들이있는 하나 이상의 요소 (예 : 이미지 및 양식 컨트롤)를 포함하는 편집 가능한 요소 내의 선택입니다. 당신이 호출하면 .createRange()그런 선택에, 당신은 얻을 ControlRange오히려 이상을 TextRange, 그리고 ControlRange들에는없는 text속성을.

— Tim Down

2

@TimDown "jQuery에는 X가 없다"고 말하는 것은 매우 얇은 일이다. 물론 올바른 플러그인을 사용하면 자바 스크립트로 브라우저에서 할 수있는 모든 것을 할 수있다. 이 경우 jquery.selection ( madapaja.github.io/jquery.selection )이 있습니다. "그렇지 않아야한다"고 말하는 것도 똑같이 잘못입니다. 나는 이것을 정확하게 찾고 있었기 때문에 여기에 도착했다. 유스 케이스가 있으며 jQuery가 올바른 솔루션입니다.

— Auspex

8

@Auspex : 나는 당신의 요점을 보지만 동의하지 않습니다. jQuery 플러그인은 jQuery에 의존하는 라이브러리입니다. 자체는 jQuery가 아닙니다. 선택 처리의 경우 jQuery 자체는 정확히 아무것도 제공하지 않으므로 (선택 처리가 jQuery와 다른 것이기 때문에) jQuery를 사용하는 솔루션은 우연히 사용합니다.

— Tim Down

1

@ Dennis98 : 내가 원격으로 화가 아니에요 또는 액세스하려고하면 당신은 크롬에서 콘솔에 경고를 얻을 수 있기 때문에 입력 유형에 대한 불쾌 : 체크 인 selectionStart또는 selectionEnd에 <input>(예 : "번호"와 같은) 요소 유형이하지 않습니다 지원하십시오 ( 예 : jsfiddle.net/6zoposby/2 참조 ). selectionStartIE <= 8에서 코드가 깨지지 않도록 존재 여부를 확인했습니다. 검사가 너무 activeElement과도 하다고 인정합니다 . 나는 slice그것이 더 강력하고 (여기서 유용하지는 않지만)보다 약간 짧기 때문에 사용 substring합니다.

— Tim Down

111

이런 식으로 강조 표시된 텍스트를 얻으십시오.

window.getSelection().toString()

그리고 물론 다음과 같은 특별한 치료법이 있습니다 :

document.selection.createRange().htmlText

— 파파
소스

2

IE> = 10의 경우 " document.selection IE10에서 지원이 제거되고 window.getSelection " 로 대체되었습니다 . 출처 : connect.microsoft.com/IE/feedback/details/795325/…

— user2314737

이것은 다양한 브라우저 (예 : Firefox)에서 여러 조건에서 실패합니다.

— Makyen

11

이 솔루션은 크롬을 사용하고 (다른 브라우저를 확인할 수 없음) 텍스트가 동일한 DOM 요소에있는 경우 작동합니다.

window.getSelection().anchorNode.textContent.substring(
  window.getSelection().extentOffset, 
  window.getSelection().anchorOffset)

— 앤드류 케네디
소스

0

사용하십시오 window.getSelection().toString().

developer.mozilla.org에서 자세한 내용을 읽을 수 있습니다.

— 에부 카
소스