使用 html 页面编辑精确定位文本文件选中

如下是一个实例，实现了文本的换行，选中以及滚动到选中文本位置的功能？
复制代码
<html style='height:100%;'>
<head>
    <meta charset='UTF-8' />
</head>
<body style='height:100%;padding:0;margin:0;border-width:0;'>
    <div id="content" contenteditable='true' style='height: 100%; width: 100%; white-space: pre-wrap; overflow-y: scroll;'>
    </div>
    <script>
        var str = "xxx";
        var div = document.getElementById('content');
        div.textContent = decodeURIComponent(str);
    </script>
</body>
</html>
复制代码

 

复制代码
var startIndex = 100;
var endIndex = 120;
var range = document.createRange();
var selection = window.getSelection();
var divElement = document.getElementById('content');
range.setStart(divElement.firstChild, startIndex);
range.setEnd(divElement.firstChild, endIndex);
selection.removeAllRanges();
selection.addRange(range);

// 让选定内容滚动到可见区域
var rect = range.getBoundingClientRect();
divElement.scrollTop = rect.top - rect.height;
divElement.focus();
复制代码

 

posted on   空明流光  阅读(46)  评论(0)  编辑  收藏  举报

相关博文：
· 手机浏览器中实现可拖动div
· winform 动态截断或者补全文字宽度
· 从零开始，开发一个 Web Office 套件（9）：拖动鼠标选中文字 Edge Case
· CSS实现div里面的内容超滚动
· 从零开始，开发一个 Web Office 套件（13）：删除、替换已选中文字
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
历史上的今天：
2020-03-20 c# 创建斜着写字图片

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示