获取浏览器选中区域内容的js

本文介绍了一种方法,用于获取网页中用户所选中内容的HTML格式。该方法兼容现代浏览器及Internet Explorer,能够方便地应用于需要处理或保存用户选中内容的应用场景。

getSelectionHTML : function() { var userSelection; if (window.getSelection) { // W3C Ranges userSelection = window.getSelection(); // Get the range: if (userSelection.getRangeAt) var range = userSelection.getRangeAt(0); else { var range = document.createRange(); range.setStart(userSelection.anchorNode, userSelection.anchorOffset); range .setEnd(userSelection.focusNode, userSelection.focusOffset); } // And the HTML: var clonedSelection = range.cloneContents(); var div = document.createElement('div'); div.appendChild(clonedSelection); return div.innerHTML; } else if (document.selection) { // Explorer selection, return the HTML userSelection = document.selection.createRange(); return userSelection.htmlText; } else { return ''; } }

转自:http://snipplr.com/view/10912/get-html-of-selection/

### 使用 JavaScript 获取选中的富文本内容 在富文本编辑器中,获取用户选中内容是一个常见的需求。以下是实现这一功能的详细方法和代码示例。 #### 1. 使用 `window.getSelection()` 方法 `window.getSelection()` 是一个标准的浏览器 API,用于获取当前文档中被用户选中内容。该方法返回一个 `Selection` 对象,可以通过其属性访问选中的文本内容。 ```javascript function getSelectedText() { const selection = window.getSelection(); // 获取当前选中内容 if (selection.rangeCount > 0) { // 检查是否有选中内容 return selection.toString(); // 返回选中的文本 } return ''; // 如果没有选中内容,则返回空字符串 } ``` 此方法适用于大多数现代浏览器,并且可以直接获取用户在富文本编辑器中选中的文本[^4]。 #### 2. 在富文本编辑器中结合 `contenteditable` 如果富文本编辑器是基于 `contenteditable` 实现的,可以结合 `document.execCommand()` 或其他 DOM 操作来增强功能。以下是一个完整的示例: ```html <div id="editor" contenteditable="true" style="border: 1px solid black; padding: 10px; min-height: 100px;"> 请在这里编辑内容... </div> <button onclick="alert(getSelectedText())">获取选中内容</button> <script> function getSelectedText() { const selection = window.getSelection(); if (selection.rangeCount > 0) { return selection.toString(); } return ''; } </script> ``` 在此示例中,用户可以在 `contenteditable` 的区域中选择文本,并通过点击按钮获取选中内容[^5]。 #### 3. 处理跨浏览器兼容性 虽然 `window.getSelection()` 是主流浏览器的标准方法,但在某些旧版本浏览器中可能需要额外处理。例如,在 Internet Explorer 中可以使用 `document.selection` 来替代: ```javascript function getSelectedText() { let selectedText = ''; if (window.getSelection) { selectedText = window.getSelection().toString(); } else if (document.selection && document.selection.type !== 'Control') { selectedText = document.selection.createRange().text; } return selectedText; } ``` 这种方法确保了代码在不同浏览器中的兼容性。 #### 4. 在第三方库中获取选中内容 如果使用了第三方富文本编辑器(如 TinyMCE 或 KindEditor),通常可以通过其 API 获取选中内容。例如,在 TinyMCE 中可以使用 `editor.selection.getContent()` 方法: ```javascript // 假设已经初始化了 TinyMCE 编辑器 const selectedContent = editor.selection.getContent(); // 获取选中的 HTML 内容 console.log(selectedContent); ``` 对于 KindEditor,可以通过类似的方式获取选中内容: ```javascript const selectedContent = editor.getSelectionHtml(); // 获取选中的 HTML 内容 console.log(selectedContent); ``` 这些方法提供了更高的抽象层次,简化了开发过程[^2]。 --- ### 注意事项 - 如果需要获取选中的 HTML 而不仅仅是纯文本,可以使用 `selection.getRangeAt(0).cloneContents()` 创建一个包含选中内容的文档片段。 - 在某些情况下,`document.execCommand()` 方法已被废弃,因此建议优先使用现代 API[^5]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值