Yanor.net/
Wiki
Blog
GitHub
Sandbox
開始行:
* 選択状態のテキストを扱う [#i164eda0]
** Rangeオブジェクト [#bc7cd74b]
- 選択範囲を扱うには、Rangeオブジェクトを使う。
- IEとそれ以外のブラウザでRangeオブジェクト取得方法が違う...
-- IE：Rangeオブジェクトを作成する。
-- それ以外のブラウザ：SelectionオブジェクトからRangeオブ...
** サンプル [#ee1cc82a]
以下の機能を持つ。
- show() 選択状態の文字列を取り出す
- surround() 選択状態の文字列をタグで囲む
<html>
<head>
<script type='text/javascript' src='http://getfirebug.co...
<script type="text/javascript">
var isIE = navigator.appName == 'Microsoft Internet Expl...
var sample = {
init: function () {
document.getElementById('show').onclick = this.show;
document.getElementById('surround').onclick = this.s...
},
// 選択状態の文字列を取り出す
show: function() {
var output;
if (isIE) {
var range = document.selection.createRange();
output = range.htmlText; // range.textでテキストの...
} else {
if (!window.getSelection().rangeCount) return;
var range = window.getSelection().getRangeAt(0);
var frag = range.cloneContents();
output = frag.firstChild.nodeValue;
}
alert(output);
},
// 選択状態の文字列をタグで囲む
surround: function () {
var span = document.createElement("span");
span.style.color = "red";
if (isIE) {
var range = document.selection.createRange();
var container = document.createElement("");
container.appendChild(span);
span.innerHTML = range.htmlText;
range.pasteHTML(container.innerHTML);
} else {
if (!window.getSelection().rangeCount) return;
var range = window.getSelection().getRangeAt(0);
range.surroundContents(span);
}
}
};
</script>
</head>
<body onload="sample.init()">
<div id="dv">abc 123 xyz</div>
<br /><input id="show" type="button" value="show">
<br /><input id="surround" type="button" value="surround">
</body>
</html>
** 参考 [#p2d8a219]
- Rangeオブジェクト https://developer.mozilla.org/ja/DOM/...
- Selectionオブジェクト https://developer.mozilla.org/ja/...
- Document Fragment https://developer.mozilla.org/En/DOM/...
- createTextNode() https://developer.mozilla.org/en/DOM/d...
終了行:
* 選択状態のテキストを扱う [#i164eda0]
** Rangeオブジェクト [#bc7cd74b]
- 選択範囲を扱うには、Rangeオブジェクトを使う。
- IEとそれ以外のブラウザでRangeオブジェクト取得方法が違う...
-- IE：Rangeオブジェクトを作成する。
-- それ以外のブラウザ：SelectionオブジェクトからRangeオブ...
** サンプル [#ee1cc82a]
以下の機能を持つ。
- show() 選択状態の文字列を取り出す
- surround() 選択状態の文字列をタグで囲む
<html>
<head>
<script type='text/javascript' src='http://getfirebug.co...
<script type="text/javascript">
var isIE = navigator.appName == 'Microsoft Internet Expl...
var sample = {
init: function () {
document.getElementById('show').onclick = this.show;
document.getElementById('surround').onclick = this.s...
},
// 選択状態の文字列を取り出す
show: function() {
var output;
if (isIE) {
var range = document.selection.createRange();
output = range.htmlText; // range.textでテキストの...
} else {
if (!window.getSelection().rangeCount) return;
var range = window.getSelection().getRangeAt(0);
var frag = range.cloneContents();
output = frag.firstChild.nodeValue;
}
alert(output);
},
// 選択状態の文字列をタグで囲む
surround: function () {
var span = document.createElement("span");
span.style.color = "red";
if (isIE) {
var range = document.selection.createRange();
var container = document.createElement("");
container.appendChild(span);
span.innerHTML = range.htmlText;
range.pasteHTML(container.innerHTML);
} else {
if (!window.getSelection().rangeCount) return;
var range = window.getSelection().getRangeAt(0);
range.surroundContents(span);
}
}
};
</script>
</head>
<body onload="sample.init()">
<div id="dv">abc 123 xyz</div>
<br /><input id="show" type="button" value="show">
<br /><input id="surround" type="button" value="surround">
</body>
</html>
** 参考 [#p2d8a219]
- Rangeオブジェクト https://developer.mozilla.org/ja/DOM/...
- Selectionオブジェクト https://developer.mozilla.org/ja/...
- Document Fragment https://developer.mozilla.org/En/DOM/...
- createTextNode() https://developer.mozilla.org/en/DOM/d...
ページ名:
