一、獲取/清除選中的文字
//獲取選中的文字 document.getElementById("get").onclick = function () { var txt = window.getSelection ? window.getSelection() : document.selection.createRange().text; alert(txt);//alert默認調用了toString() }
//清除選中的文字 document.getElementById("set").onclick = function () { window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); }
二、設置文字選中效果
<body> <p>這是一段默認被選中的文本</p> <p>這是一段默認有開始截止位置的文本</p> <div> <span>太陽當空照，<br></span> <span>花兒對我笑。<br></span> <span>小鳥說：“早，早，早，<br></span> <span>你為什么背上小書包？”<br></span> <span>我去上學校，<br></span> <span>天天不遲到。<br></span> <span>愛學習，愛勞動，<br></span> <span>長大要為祖國立功勞。<br></span> </div> </body>
1、全部選中
//選中一段文字 var range = document.createRange(); referenceNode = document.getElementsByTagName("p").item(0); range.selectNodeContents(referenceNode); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range)
實現效果：
2、設置開始截止位置選中
//分段式選中,可用nodeType判斷 //如果起始節點類型是 Text， Comment, or CDATASection之一, 那么 startOffset指的是從起始節點算起字符的偏移量。 var range2 = document.createRange(); var startNode = document.getElementsByTagName("p").item(1).firstChild; var startOffset = 1; range2.setStart(startNode, startOffset); var endOffset = 7; range2.setEnd(startNode, endOffset); var selection2 = window.getSelection(); selection2.removeAllRanges(); selection2.addRange(range2)
實現效果：
跨段選中：
//分段式選中2 // 對於其他 Node 類型節點， startOffset 是指從起始結點開始算起子節點的偏移量。 var range2 = document.createRange(); var startNode = document.getElementsByTagName("div").item(0); //childNode會將html換行加進去 for (var i = 0; i < startNode.childNodes.length; i++) { if (startNode.childNodes[i].nodeName == "#text" && !/\s/.test(startNode.childNodes.nodeValue)) { startNode.removeChild(startNode.childNodes[i]) } } var startOffset = 3; range2.setStart(startNode, startOffset); var endOffset = startNode.childNodes.length - 2; range2.setEnd(startNode, endOffset); var selection2 = window.getSelection(); selection2.removeAllRanges(); selection2.addRange(range2)
實現效果：
3、跨段文字特定位置選中
//分段式選中3 //跨段文字特定位置選中 var range2 = document.createRange(); var startNode = document.getElementsByTagName("div").item(0); //childNode會將html換行加進去 for (var i = 0; i < startNode.childNodes.length; i++) { if (startNode.childNodes[i].nodeName == "#text" && !/\s/.test(startNode.childNodes.nodeValue)) { startNode.removeChild(startNode.childNodes[i]) } } range2.setStart(startNode.childNodes[5].firstChild, 2); range2.setEnd(startNode.childNodes[7].firstChild, 8); var selection2 = window.getSelection(); selection2.removeAllRanges(); selection2.addRange(range2)
實現效果：
