在 contenteditable div 中选择范围

发布于 2024-09-24 23:33:42 字数 724 浏览 0 评论 0原文

我有一个 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>

假设，我想进行一个范围选择，其中将包含字符串“world！This is”

如何做到这一点？

原文

I've got a contenteditable div and a few paragraphs in it.

Here's my code:

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

Assuming, I want to make a range selection which will contain the string "world! This is"

How to do that?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

残月升风 2024-10-01 23:33:42

一旦您掌握了包含要突出显示的文本的文本节点，一切就很容易了。如何获得这些取决于您需要它的通用性。目前，在用户编辑之前，以下操作将起作用：

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

Once you've got hold of the text nodes containing the text you want highlighted, it's easy. How you get those depends on how generic you need this to be. As it is at the moment, before the user has edited it, the following will work:

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

回复收藏 0 原文

~没有更多了~