防止JavaScript window.getSelection（）循環引用

Question

觀看此演示（取決於僅在當前Chrome中有效的selectionchange事件）： http : //jsfiddle.net/fyG3H/

選擇一些lorem ipsum文本，然后集中文本輸入。 在控制台日志中，您將看到有一個DOMSelection對象。 它具有HTMLBodyElement的anchorNode值，而應具有Text 。

我不知道為什么會這樣，直到我嘗試對選擇對象進行字符串處理： http : //jsfiddle.net/fyG3H/1/

這給出了以下錯誤：

未捕獲的TypeError：將圓形結構轉換為JSON

您知道如何防止由window.getSelection（）引起的這種循環引用嗎？

編輯

新的演示也可以在其他瀏覽器中使用，但仍然提供了錯誤的anchorNode： http : //jsfiddle.net/fyG3H/5/

並使用JSON.stringify： http : //jsfiddle.net/fyG3H/6/

Firefox似乎返回一個空的{}而不是拋出錯誤。

Answer 1

您需要在getSelection()上調用toString() getSelection() 。 我已經更新了您的小提琴，使其表現出預期的效果。

var selection;

$('p').bind('mouseup', function() {
    selection = window.getSelection().toString();
});

$('input').bind('focus', function() {
   this.value = selection;
   console.log(selection); 
});

觀看演示

---

編輯：

無法獲得正確的錨節點的原因是DOMSelection對象是通過引用傳遞的，當您專注於輸入時，選擇將被清除，從而返回與沒有選擇相對應的選擇默認值。 解決該問題的一種方法是將DOMSelection屬性克隆到一個對象並對其進行引用。 您將不再具有原型DOMSelection方法，但是根據您要執行的操作，這可能就足夠了。

var selection, clone;

$('p').bind('mouseup', function() {
    selection = window.getSelection();
    clone = {};
    for (var p in selection) {
        if (selection.hasOwnProperty(p)) {
            clone[p] = selection[p];
        }
    }
});

$('input').bind('focus', function() {
   console.dir(clone); 
});

觀看演示