js利用实现div文本标记，并可以取消标记，并返回标记内容在文档位置

最新推荐文章于 2024-04-16 10:15:51 发布

双鱼心梦

最新推荐文章于 2024-04-16 10:15:51 发布

阅读量756

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签： typescript javascript

本文链接：https://blog.youkuaiyun.com/weixin_41995297/article/details/116996593

本文介绍如何使用JavaScript（TS）实现对div文本的标记操作，并取消标记。同时，探讨了获取标记文本在文档中位置的难点，强调在遇到问题时应转换思维。内容包括TS实现代码及结果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、window.getSelection()返回的一个Selection对象，表示用户选择文本范围或光标的当前位置，其实获取当前选择文本内容相当容易，获取标记文本所在整个文档的位置是比较难的 ,因为标记是给文本添加标签，纠结了好久，他的位置都是相对于锚节点来开始计算的。纠结了几天，位置还是需要自己算的

TS实现

 const selectStr = selecter.toString();  // 返回代表当前selection对象的字符串,例如当前选择的文本文字.
 const selRange = selecter.getRangeAt(0);   // 返回一个当前选区的区域对象
  if (selectStr !== '') {
   
   
   let starts = 0;
   if (selRange.startContainer.previousSibling === null) {
   
    // 当前标记处之前没有被标记的内容
     starts = selRange.startOffset;
     // 当前标记处之前有被标记的内容,标记之后也有标记内容
   } else if (selRange.startContainer.nextSibling?.nodeName === 'SPAN' && selecter.anchorNode.previousSibling?.nodeName === 'SPAN') {
   
   
     for (let i = 0; i < selRange.startContainer.parentNode.childNodes.length - 1; i++) {
   
   
       const getCurrent = selRange.startContainer.parentNode.childNodes[i];
       if (getCurrent.nodeValue !== selRange.startContainer.nodeValue) {
   
   
         if