javascriptで文字列を選択状態にする

javascript

javascriptでテキストエリアではない要素内の文字列を選択状態にする方法。
ググっても情報が少なかったのでメモ。

とりあえず下にサンプルをつくったのでボタンを押してほしい。
押したらわかると思うけれど選択ボタンを押すと、文字列が選択された状態になる。

ラブリーマイエンジェルあやせたん

以下を見れば何をしてるかだいたい掴める思う。

function selectText() {
  var element= document.getElementById("ayase");
  var rng = document.createRange();
  rng.selectNodeContents(element);
  window.getSelection().addRange(rng);
}

全体の流れをひと通り。
まず、選択したい要素を取得する。
次にRangeをつくりselectNodeContentsで選択範囲を決める。
getSelectionメソッドで取得したマウスの選択範囲にRangeを追加する。
Rangeの選択範囲とマウスの選択範囲のうまい表現が思いつかなかったのでわかりずらいけどだいたいそんな感じ。


実行可能な全体のサンプルを載せておく。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>文字列の選択</title>
<script type="text/javascript">
function selectText() {
  var element= document.getElementById("ayase");
  var rng = document.createRange();
  rng.selectNodeContents(element);
  window.getSelection().addRange(rng);
}
</script>
</head>
<body>
<p id="ayase" onclick="selectText()">ラブリーマイエンジェルあやせたん</p>
<button onclick="selectText()">選択</button>
</body>

なお、私自身javascript初心者なのでこの情報が正しいとは限らないのです。