代码之家 › 专栏 › 技术社区 › angry kiwi

在contenteditable div中选择范围

range selection javascript

angry kiwi · 技术社区 · 14 年前

我有一个 contenteditable

这是我的密码:

<!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>

假设,我想选择一个包含字符串“world!“这是”

1 回复 | 直到 8 年前

Tim Down 14 年前

一旦掌握了包含要高亮显示的文本的文本节点,就很容易了。你如何得到这些取决于你需要它的通用性。目前,在用户编辑之前,以下操作将起作用:

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);

推荐文章

muzzie · Javascript createRange。如何仅使用一个脚本选择不同的跨距?

7 年前

Harrison Cramer · 在D3中操纵不透明度和文本。js公司

7 年前

Zenoo · 自定义SO的代码段选择背景

7 年前

pradeepradyumna · C#Listview避免默认行选择[重复]

7 年前

Nilambari · Vaadin无法在组合框值更改时更新网格容器

7 年前

Thundersheep · 变量的子选择

7 年前

Tobi · Contenteditable:如何在按del或backspace时完全删除span

7 年前

Osti · 禁用在DatagridComboBox中选择特定项

7 年前

Omar Boshra · 在edittext中更改文本之前获取光标起始索引

7 年前

vasf · 使用javascript的文本选择在chromium中不可见

7 年前