getSelection突出顯示

Question

我有以下javascript，它在選擇文本並單擊按鈕時突出顯示文本。

$('.highlight').on("click", function (e) { 
    selected = getSelection(); 
    range = selected.getRangeAt(0); 
    newNode = document.createElement("span"); 
    newNode.setAttribute("class", "highlighted"); 
    range.surroundContents(newNode); 
}); 
function getSelection() { 
    var seltxt = ''; 
    if (window.getSelection) { 
     seltxt = window.getSelection(); 
    } else if (document.getSelection) { 
     seltxt = document.getSelection(); 
    } else if (document.selection) { 
     seltxt = document.selection.createRange().text; 
    } else return; 

    return seltxt; 
} 

但是，這會在我的p標記中創建很多凌亂的span類。是否可以立即對選定的文本進行着色而不必將其包裹在一個範圍中？

的另一個原因是這樣做的，我要檢查選中的文本是否已經有一個黃色的背景，如果是把它透明的（也許是兩種顏色之間切換）

Answer 1

怎麼這樣呢？請記住，這會將樣式片段添加到您的網頁，您可能希望根據自己的要求將其移除。現在，它也會突出顯示選擇的文本，否則。

$(".highlight").on("click", function() { 
 
    !$("#selection").length && $("<style id=\"selection\">::-moz-selection { background: #111; color: #fff; } ::selection { background: #111; color: #fff; }</style>").appendTo("head"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>This is some text. Select me to see my color and background color change!</p> 
 

 
<button class="highlight">Click Me</button>

注意，::selection已經removed from the spec。它可能無法可靠地爲所有用戶工作。