如何用JS一行代码来实现获取选择区域的HTML字符串

Question

如何用JS一行代码来实现获取选择区域的HTML字符串？

可以通过DocumentFragment和Range来获取选择区域的HTML字符串：

var selection = window.getSelection();
var range = selection.getRangeAt(0);
var clonedRange = range.cloneRange();
var fragment = clonedRange.cloneContents();
var div = document.createElement('div');
div.appendChild(fragment);
var htmlString = div.innerHTML;
console.log(htmlString);

代码再简化，越少越好，能用一句话完成最佳
可以使用以下一行代码来实现获取选择区域的HTML字符串：
下面代码有问题

var htmlString = window.getSelection().getRangeAt(0).cloneContents().querySelector('body').innerHTML;

代码错误提示：VM317:1 Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')
    at <anonymous>:1:91

抱歉，我之前给出的代码有一些错误。请尝试以下代码：
var htmlString = document.getSelection().getRangeAt(0).cloneContents().innerHTML;

```javascript

Answer 1

抱歉，你在尝试使用.innerHTML时出现错误是因为cloneContents()返回的是DocumentFragment，它并没有innerHTML属性。我们需要创建一个新的DOM元素，然后将DocumentFragment添加进去，最后通过新DOM元素的innerHTML属性获取HTML字符串。这种情况下，我们不能直接用一行代码获取到选择区域的HTML字符串。

但是，如果我们真的想在一行代码中完成，我们可以使用ES6的模板字符串和立即执行函数来实现：

var htmlString = ((node) => { var div = document.createElement('div'); div.appendChild(node); return div.innerHTML; })(window.getSelection().getRangeAt(0).cloneContents());

这行代码首先定义了一个接收一个节点作为参数的立即执行函数，然后创建一个新的div元素，将传入的节点添加到新的div元素中，最后返回div元素的innerHTML属性。然后立即执行这个函数，传入选择区域的内容作为参数。