ハイライト/選択されたテキストを取得する

351

たとえばjQueryを使用して、Webサイトの段落で強調表示されたテキストを取得することはできますか？

javascript jquery textselection

— ダン
ソース

2

これが実用的なソリューションですdipaksblogonline.blogspot.in/2014/11/…–

— Dipak

単純なjavascriptが私のために働いた。document.getSelection（）。anchorNode.data.substr（document.getSelection（）。anchorOffset、document.getSelection（）。focusOffset-document.getSelection（）。anchorOffset）

— Rohit Verma

@RohitVerma：これは、単一のテキストノード内に含まれる選択の単純なケースでのみ機能します。

— Timダウン

@Dipak投稿で参照しているブログからソーシャル共有機能をどのように複製しますか？選択した文字列を返すだけでなく、その変数をTwitterリンクに入力しようとしています。

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

{} -forkが適している場合、他に何がありますか？「コントロール」とは何ですか？

— Dan

29

@ダン：申し訳ありませんが、私はこの質問を逃しました（SOが私に警告したとは思わないでください）2番目のブランチはIE <= 8向けです（IE 9はを実装しますwindow.getSelection()）。document.selection.typeチェックが選択は、テキストの選択ではなく、コントロールの選択であることをテストしています。IEでは、コントロールの選択は、アウトラインやサイズ変更ハンドルを備えた1つまたは複数の要素（画像やフォームコントロールなど）を含む編集可能な要素内の選択です。あなたが呼び出す場合.createRange()、このようなAの選択に、あなたが得るControlRangeよりもむしろをTextRange、そしてControlRangeSは一切持っていないtextプロパティを。

— Tim Down

2

@TimDown「jQueryにはXがない」と言うのは非常に薄いことです。もちろん、適切なプラグインがあれば、JavaScriptを使用してブラウザーで実行できるすべてのことを実行できます。この場合、jquery.selection（madapaja.github.io/jquery.selection）があります。「すべきではない」と言うのも同様に間違っています。まさにこれを探していたのでここに着きました。私にはユースケースがあり、jQueryが適切なソリューションです。

— Auspex 2015

8

@Auspex：要点はわかりますが、私は同意しません。jQueryプラグインは、jQueryに依存するライブラリです。それ自体はjQueryではありません。選択処理の場合、jQuery自体は正確に何も提供しません（選択処理はjQueryの目的ではないため、本来あるべき状態です）。

— Tim Down

1

@ Dennis98：私はリモートでイライラしたり気分を害したりしていません:)入力タイプのチェックは、アクセスしようとしselectionStartたりselectionEnd、<input>要素のタイプ（「数値」など）にアクセスしようとすると、Chromeのコンソールに警告が表示されるためですサポートします（たとえば、jsfiddle.net/6zoposby /2を参照してください）。selectionStartコードがIE <= 8で壊れないように、の存在のチェックを残しましたactiveElement。今のチェックはおそらくやり過ぎです。私はsliceそれがより強力であり（ここでは役に立たないが）、タイプするよりも少し短いので使用しsubstringます。

— Tim Down

111

この方法で強調表示されたテキストを取得します。

window.getSelection().toString()

そしてもちろん、IEの特別な扱い：

document.selection.createRange().htmlText

— ParPar
ソース

2

IE> = 10の場合、「IE10ではdocument.selection サポートが削除され、に置き換えられました window.getSelection。」出典：connect.microsoft.com/IE/feedback/details/795325/...

— user2314737

これは、さまざまなブラウザー（Firefoxなど）の複数の条件下で失敗します。

— Makyen

11

このソリューションは、Chromeを使用していて（他のブラウザーを確認できない）、テキストが同じDOM要素にある場合に機能します。

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

— アンドリュー・ケネディ
ソース

0

を使用しwindow.getSelection().toString()ます。

あなたはdeveloper.mozilla.orgでもっと読むことができます

— エブカ
ソース