如何從核心JavaScript選擇獲取jquery元素？

Question

在我的頁面中，用戶選擇一個文本，一旦他們選擇我將選定的對象傳遞給函數。在函數中，我想使用jquery獲得適當的文本註釋..如何獲取？

這裏是我的功能：

var manipulator = function (coreObject) { 
    console.log(coreObject);//i would like find the text node using this object and like to wrap in to a element say 'span'... 
} 

function highlight() { 
    var range, sel; 
    var span = document.createElement("span"); 
    span.style.fontWeight = "bold"; 
    span.style.color = "green"; 
    // IE case 
    if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     manipulator(range) 
    } else if (window.getSelection) { 
     // Non-IE 
     sel = window.getSelection(); 
     manipulator(sel) 
    } 
} 

$("#addText").on('click', function(event) { 
    event.preventDefault(); 
    highlight(); 
}); 

Live Demo

我正在尋找所有的瀏覽器友好的方式。

Answer 1

selection或getSelection返回的值是選定的文本字符串，而不是DOM中的元素。這就是爲什麼你不能將它作爲jQuery對象的原因。

但是，您可以執行的操作是使用Range.surroundContents()方法（Ref：https://developer.mozilla.org/en-US/docs/Web/API/range.surroundContents）將文本選擇包裝到任何元素中。

您還需要使用Selection.getRangeAt()方法（參考號：https://developer.mozilla.org/en-US/docs/Web/API/Selection.getRangeAt）從所選文本中創建一個範圍。

下面是一個示例代碼段：

var manipulator = function (coreObject) { 
 
    var span = document.createElement("span"); 
 
    span.style.fontWeight = "bold"; 
 
    span.style.color = "blue"; 
 
\t coreObject.getRangeAt(0).surroundContents(span); 
 
} 
 

 
function highlight() { 
 
    var range, sel; 
 
    if (document.selection && document.selection.createRange) { // IE 
 
     range = document.selection.createRange(); 
 
     manipulator(range) 
 
    } else if (window.getSelection) { // Non-IE 
 
     sel = window.getSelection(); 
 
     manipulator(sel) 
 
    } 
 
} 
 

 
$("#addText").on('click', function(event) { 
 
\t event.preventDefault(); 
 
\t highlight(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit. Error ipsa quo illum excepturi autem voluptatem, maiores tempora quasi temporibus architecto ratione delectus modi qui cum earum, omnis itaque nam iure!</p><br/> 
 
<input type="button" id="addText" value="Surround" />