Javascript 通过单击元素中的任意位置获取DOM范围

给定以下HTML

<p>Today is <span data-token="DateTime.DayOfWeek">$$DayOfWeek$$</span>,
</p>
<p>Tomorrow is the next day, etc, etc....</p>

哪个输出

<span data-token="DateTime.DayOfWeek">$$DayOfWeek$$</span>

$$DayOfWeek$$

我想弄清楚的是如何构造一个包含整个元素的范围对象，作为一个范围

所需的“高级”行为是单击一段文本，并让浏览器选择该元素中的所有文本，返回一个范围对象

---

很高兴接受jQuery解决方案。

如果我理解正确，我想到了一种似乎有效的方法，您希望单击周围的元素生成一个包含该元素中所有内容的范围

如果没有onclick代码（我认为您可以处理），下面是您描述的DOM范围代码：

var sel=document.getSelection(); //find the node that was clicked
var rng=sel.getRangeAt();  //get a range on that node

//now, extend the start and end range to the whole element:
rng.setStart(rng.startContainer.parentNode.firstChild);
rng.setEndAfter(rng.endContainer.parentNode.lastChild);

//DEMO: verify the correct range using a temp div/alert:
var t=document.createElement("div");
t.appendChild(rng.cloneContents());
alert(t.innerHTML);

HTML

给你一把小提琴：

它可能不是超级跨浏览器，但可以在chrome中使用。有关其他地方的一些其他优化，请参阅

还假设只有一个子节点，如示例html中所示

---

有关范围（）和选择（）的其他参考资料

谢谢Matt。很容易将你的小提琴调整到编辑器组件中，只需将创建的范围传递给它，就可以选择整个元素。。。所以我稍微改变了JSFIDLE<代码>var TX=span.textContent | | span.innerText；range.setEnd（span.childNodes[0]，TX.length）。。这样，我认为它在所有浏览器中都能工作。+1用于将范围包装到一个新的div中，这对于获取html非常有用

var sel=document.getSelection(); //find the node that was clicked
var rng=sel.getRangeAt();  //get a range on that node

//now, extend the start and end range to the whole element:
rng.setStart(rng.startContainer.parentNode.firstChild);
rng.setEndAfter(rng.endContainer.parentNode.lastChild);

//DEMO: verify the correct range using a temp div/alert:
var t=document.createElement("div");
t.appendChild(rng.cloneContents());
alert(t.innerHTML);

<p>Today is <span data-token="DateTime.DayOfWeek">$$DayOfWeek$$</span>,</p>
<p>Tomorrow is the next day, etc, etc....</p>

var span = document.querySelector('[data-token]');

span.addEventListener('click', function() {
    var sel = window.getSelection();
    var range = document.createRange();
    sel.removeAllRanges();
    range.setStart(span.childNodes[0], 0);                      
    range.setEnd(span.childNodes[0], span.innerText.length);
    sel.addRange(range);                      
});