在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中选择范围

回答

相关问题