1

鉴于以下 HTML...

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

单击 $$DayOfWeek$$ 会返回一个DOM Range对象（通过一个组件，这是一个与 KendoUI 捆绑的 WYSIWIG 编辑器）。

然后我可以像这样访问整个元素......

var element = range.startContainer.parentElement;
console.log(element);

哪个输出...

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

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

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

很高兴接受 jQuery 解决方案。

4

2 回答 2

1

HTML

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

JS

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);                      
});

这是给你的小提琴：http: //jsfiddle.net/V66zH/2/

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

还假设只有一个 childNode，如您的示例 html

范围 ( https://developer.mozilla.org/en-US/docs/Web/API/range ) 和选择 ( https://developer.mozilla.org/en-US/docs/Web/API ) 的一些附加参考/选择）

于 2013-05-21T17:52:42.330 回答
1

这是我想出的一种方法，如果我正确理解您，您希望单击周围的元素生成包含该元素中所有内容的范围，这似乎可行。

如果没有我假设您可以处理的 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);
于 2013-05-21T17:50:38.953 回答