document.getSelection,document.selection.createRange

本文介绍了一种通过JavaScript实现的方法来获取用户在网页上选中的文本内容,包括纯文本及包含HTML标签的内容。

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

<script>
function getSel()
{
      var txt = '';
      var foundIn = '';
      if(window.getSelection)
      {
          txt = window.getSelection();
          foundIn = 'window.getSelection()';
      }else if(document.getSelection)
      {
          txt = document.getSelection();
          foundIn = 'document.getSelection()';
      }else if(document.selection)
      {
          txt = document.selection.createRange().text;
          foundIn = 'document.selection.createRange()';
      }else
          return;
      document.forms[0].selectedtext.value = 'Found in: ' + foundIn + '/n' + txt;
}
</script>
<form>
<textarea name="selectedtext" rows="5" cols="50">
</textarea><br>
<input type="button" value="Getselection" onmousedown="getSel()">
</form>

以上的代码可以捕获到选中的网页中的纯文本内容(不含HTML标签)
如果想获得包含html的内容,将document.selection.createRange().text改成document.selection.createRange().htmlText
  
### 寻找 `document.execCommand` 的现代替代方案 随着 Web 技术的发展,许多开发者发现传统的 `document.execCommand` 方法存在诸多局限性和不一致性。为了实现更强大和可靠的富文本编辑功能,社区提出了多种替代方案。 #### 使用 ContentEditable 结合 Range 和 Selection API 一种常见的做法是利用 HTML 元素的 `contenteditable` 属性来创建可编辑区域,并通过原生的 DOM 操作接口如 `Range` 和 `Selection` 来处理文档中的选区以及插入或修改内容[^1]。 ```javascript function insertHtmlAtCursor(html) { var sel, range; if (window.getSelection) { // W3C 标准方式 sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); var el = document.createElement("div"); el.innerHTML = html; var frag = document.createDocumentFragment(), node, lastNode; while ((node = el.firstChild)) { lastNode = frag.appendChild(node); } range.insertNode(frag); if (lastNode) { range = range.cloneRange(); range.setStartAfter(lastNode); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); } } } else if (document.selection && document.selection.type != "Control") { // IE 浏览器特定的方式 document.selection.createRange().pasteHTML(html); } } ``` 这种方法不仅提供了更好的跨平台支持,而且允许更加精细地控制编辑行为,比如可以更容易地集成撤销/重做机制[^2]。 #### 利用第三方库简化开发过程 对于希望快速搭建复杂编辑器的应用场景来说,采用成熟的开源项目可能是更为明智的选择。这些库通常内置了大量的实用工具函数和服务端同步等功能模块: - **Quill.js**: 提供丰富的插件生态系统和支持自定义主题的能力; - **ProseMirror**: 注重性能优化并拥有良好的扩展性; - **Slate.js**: 基于 React 构建的高度灵活的内容管理系统框架; 上述提到的一些知名编辑器都实现了对现代浏览器的良好适配,并且它们内部也摒弃了过时的 `execCommand()` 调用来构建各自的API体系结构[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值