window.getSelection(); 获取鼠标选中文本后给文本添加 span标签实现高亮第一次获取的时候下标正常加完span标签后下标位置就不对了？

失落的鼠标垫

发布于
4 月 24 日北京

window.getSelection(); 获取鼠标选中文本后给文本添加 span标签实现高亮第一次获取的时候下标正常加完span标签后下标位置就不对了

阅读 195

AI BotBETA

当你在网页中使用 window.getSelection() 来获取用户选中的文本，并尝试通过添加 span 标签来高亮这段文本时，可能会遇到下标位置变化的问题。这是因为当你向选中的文本节点添加新的 span 标签时，DOM 结构发生了变化，原有的节点和偏移量（offset）也随之改变。

要解决这个问题，你可以采取以下步骤：

保存原始范围（Range）：首先，使用 getSelection() 获取 Selection 对象，并从该对象中获取 Range 对象。这个 Range 对象代表了用户选中的区域。
创建新的节点：创建一个新的 span 元素，并设置所需的样式（例如，背景颜色以实现高亮）。
提取文本内容：从原始的 Range 对象中提取文本内容。
替换文本内容：使用提取出来的文本内容替换原始选中文本节点的内容。
将新节点插入到DOM中：将新的 span 元素插入到原来选中文本的位置。
调整范围：由于DOM结构已经改变，需要重新设置 Range 的起始和结束位置，以确保它们指向新的 span 元素。

以下是一个简化的示例代码，展示了如何实现这一过程：

// 获取选中的文本
const selection = window.getSelection();
if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);

  // 创建新的 span 元素
  const span = document.createElement('span');
  span.style.backgroundColor = 'yellow'; // 设置高亮颜色

  // 提取选中的文本
  const textNode = range.extractContents();
  const text = textNode.textContent;

  // 将文本设置到新的 span 元素中
  span.textContent = text;

  // 将 span 元素插入到原始位置
  range.insertNode(span);

  // 重新设置范围以包括新的 span 元素
  range.setStart(span, 0);
  range.setEnd(span, span.childNodes.length);

  // 更新选择以反映新的范围
  selection.removeAllRanges();
  selection.addRange(range);
}

这段代码应该能解决你遇到的问题。注意，这种方法会改变原始选中文本的结构，因为它用一个新的 span 元素替换了原始文本节点。如果你的应用依赖于原始的DOM结构，那么你可能需要调整其他部分的代码来适应这种变化。

1 个回答

发布于
4 月 26 日安徽

新手上路，请多包涵

参考这个代码

<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>js实现 选中文本 加样式</title>
  <style>
  * {
    margin: 0;
padding: 0;
}

.toolBox {
  height: 30px;
  display: flex;
  /* display: none; */
  cursor: pointer;
  z-index: 999;
}

.toolBox button {
  width: auto;
  height: 100%;
  text-align: center;
  line-height: 30px;
  color: green;
  margin-left: 10px;
}
</style>
  </head>

  <body>
  <div class="toolBox">
  <button>下划线</button>
  <button>标注背景色</button>
  <button>改变字体颜色</button>
  </div>
  <div class="text">
  先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。
将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。
亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。
臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。
先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。
愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏，臣不胜受恩感激。
今当远离，临表涕零，不知所言。今当远离,今当远离
  </div>
  </body>
  <script>
  let toolBox = document.getElementsByClassName('toolBox')[0]
console.log('toolBox:', toolBox)
let textDom = document.getElementsByClassName('text')[0]
let val = ''
toolBox.onclick = function (e) {
  console.log(e, 1111111)
  let tool = e.target
  let toolTxt = tool.innerText
  if (toolTxt.indexOf('划线') > -1) {
    add(1, val)
  } else if (toolTxt.indexOf('标注背景色') > -1) {
    add(2, val)
  } else {
    add(3, val)
  }
}
//鼠标监听,当释放鼠标的时候，调用testSelection()方法。
textDom.onmouseup = function () {
  val = testSelection()
  console.log(val)
}
function testSelection() {
  //获取Selection对象
  let selection = window.getSelection()
  //调用selection对象的toString()方法就可以获取鼠标拖动选中的文本。
  console.log('选中的文本为：----', selection.toString())
  //选中的值
  let str = selection.toString()
  return str
}

function add(type, str) {
  let textDom = document.getElementsByClassName('text')[0]
  let text = textDom.innerHTML
  //匹配传入的搜索值不区分大小写 i表示不区分大小写，g表示全局搜索  匹配标签
  let rReg = new RegExp(`${str}`, 'g')
  //替换后的值
  let rHtml = ''
  if (type == 1) {
    rHtml = text.replaceAll(
      rReg,
      `<span style=" color:red;text-decoration:underline;">${str}</span>`
    )
  } else if (type == 2) {
        rHtml = text.replaceAll(
          rReg,
          `<span style="background: red;">${str}</span>`
        )
      } else {
        rHtml = text.replaceAll(rReg, `<span style="color: red;">${str}</span>`)
      }
      console.log(rHtml, '替换后')
      textDom.innerHTML = rHtml
    }
  </script>
</html>

查看全部 1 个回答

推荐问题