实现原理:
通过window.getSelection
获取当前选中的区域,再获取文本,和html
完整代码
<div id="content"> 一剪梅·咏柳 夏完淳〔明代〕 无限伤心夕照中,故国凄凉,剩粉余红。金沟御水自西东,昨岁陈宫,今岁隋宫。 往事思量一晌空,飞絮无情,依旧烟笼。长条短叶翠濛濛,才过西风,又过东风。 <img src="https://www.baidu.com/img/flexible/logo/pc/result@2.png" alt="" srcset=""> </div> <script> /** * 获取当前选中的text/html * */ function getCurrentSelect(){ let selectionObj = null, rangeObj = null; let selectedText = "", selectedHtml = ""; // 处理兼容性 if(window.getSelection){ // 现代浏览器 // 获取text selectionObj = window.getSelection(); selectedText = selectionObj.toString(); // 获取html rangeObj = selectionObj.getRangeAt(0); var docFragment = rangeObj.cloneContents(); var tempDiv = document.createElement("div"); tempDiv.appendChild(docFragment); selectedHtml = tempDiv.innerHTML; } else if(document.selection){ // 非主流浏览器IE selectionObj = document.selection; rangeObj = selectionObj.createRange(); selectedText = rangeObj.text; selectedHtml = rangeObj.htmlText; } return { text: selectedText, html: selectedHtml } }; // 监听内容区域鼠标抬起事件 document.querySelector('#content').addEventListener('mouseup', function(){ console.log('onmouseup'); console.log(getCurrentSelect()); }) </script>
考