ddddd

获取鼠标选中的文本

作者：程序员11 时间：2022-11-26 人气：527 QQ交流群\邮箱:1003265987@qq.com

获取鼠标选中的文本

要展示的内容

昨天产品提了个需求，要获取选中的文本，并在选中的文本后面加个添加按钮，将选中的文本渲染到另一边。

这个可以通过window.getSelection()来获取选中的信息

<!DOCTYPE html>
<html style="overflow: hidden;">
<head>
    <meta charset="UTF-8">
    <title>我是父页面，调用别的子页</title>
    <style type="text/css">
/* webkit, opera, IE9 （谷歌浏览器）*/
::selection { 
    background:rgb(255, 145, 0); 
    color:red; 
}
/* mozilla firefox（火狐浏览器） */
::-moz-selection { 
    background:rgb(255, 145, 0); 
    color:red; 
}

    </style>
</head>
<body>
    <div>
        这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
        这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
        这是一<b>段文本这是一段</b>文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
        <p style="color:red;">这是一段文本这是一段文本</p>
    </div>
</body>
<script>
    window.addEventListener('mouseup', function (e) {
        let result = window.getSelection().toString()
        console.log(result);
let doc = document.getSelection().getRangeAt(0).cloneContents();
let text = document.getSelection().toString();
let node = document.createElement("p");
node.appendChild(doc);
console.log(node.innerHTML,text);
    })
 
</script>
</html>