blog.Ring.idv.tw
JavaScript - 用 Range 標記文字重點
不曉得有多少人習慣拿螢光筆在書本上畫重點？
假如現在我們有個需求~ 而這個需求就是要將我們在書本上畫重點的這個動作~ 轉移到Web上面來~ OK, 那該如何做呢？
我想~ 要在網頁上取得所選取的文字~ 那必然離不開「Range」這個Object來協助我們達成~
那有什麼樣的方式又可以達到IE、Firefox、Chrome眾多瀏覽器的支持？
下述是筆者的方式，請參考：
<html>
<head>
<script>
function labelText()
{
var node = document.createElement("span");
node.style.backgroundColor = 'yellow';
if(document.selection)
{
var range = document.selection.createRange();
var container = document.createElement("div");
container.appendChild(node);
node.innerHTML = range.htmlText;
range.pasteHTML(container.innerHTML);
}else{
var selection = window.getSelection();
var range = selection.getRangeAt(0);
range.surroundContents(node);
}
}
</script>
</head>
<body onmouseup="labelText()">
This is a test paragraph.<br/>
This is a test paragraph.<br/>
This is a test paragraph.<br/>
This is a test paragraph.<br/>
This is a test paragraph.<br/>
</body>
</html>
結果：
從結果上來看是沒什麼大問題~ 但... 如果要標記的文字是用「<p>(paragraph)」所標記的話那又會如何？
的確~ 這樣的方式在Firefox或Chrome都還會出現些問題~ 就留待之後探討...
參考資源
．Rich HTML editing in the browser: part 1
．Inserting text into Firefox rich text editor - Jeff&'s Junk
