在contenteditable div中選擇範圍

我有一個contenteditable div和幾個段落。在contenteditable div中選擇範圍

這裏是我的代碼：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    </head> 
    <body> 
     <div id="main" contenteditable="true" 
      style="border:solid 1px black; width:300px; height:300px"> 
      <div>Hello world!</div> 
      <div> 
       <br> 
      </div> 
      <div>This is a paragraph</div> 
     </div> 
    </body> 
</html>

假設，我要做出選擇範圍將包含字符串「！世界這是」

如何做到這一點？

來源

2010-09-22 angry kiwi

一旦掌握了包含要突出顯示的文本的文本節點，就很容易。你如何得到這些取決於你需要這種通用性。因爲它是在目前，用戶編輯之前，下面的工作：

var mainDiv = document.getElementById("main"); 
var startNode = mainDiv.firstChild.firstChild; 
var endNode = mainDiv.childNodes[2].firstChild; 

var range = document.createRange(); 
range.setStart(startNode, 6); // 6 is the offset of "world" within "Hello world" 
range.setEnd(endNode, 7); // 7 is the length of "this is" 
var sel = window.getSelection(); 
sel.removeAllRanges(); 
sel.addRange(range);

來源

2010-09-22 21:31:40

'removeAllRanges'然後'addRange'是我錯過了我的情況的作品。感謝代碼！ – siannopollo 2017-01-16 18:39:07

在contenteditable div中選擇範圍

回答

相關問題