如何getSelection（）在一個特定的div？

我有一個contenteditable div（id爲'editor1'），允許用戶輸入文本。然後是一個允許他們爲任何突出顯示的文本着色的功能。我的js使用window.getSelection().getRangeAt(0)，但問題在於它們可以突出顯示div外的單詞，並且它們的顏色也會改變。至今;我已經試過：如何getSelection（）在一個特定的div？

 function red(){ 
    {  
     var getText = document.getElementById("editor1").innerHTML; 
     var selection = getText.getSelection().getRangeAt(0); 
     var selectedText = selection.extractContents(); 
     var span = document.createElement("span"); 
     span.style.color = "red"; 
     span.appendChild(selectedText); 
     selection.insertNode(span); 
    } 
    }

小提琴：https://jsfiddle.net/xacqzhvq/

正如你所看到的，如果我想強調「這將成爲紅色以及」我可以用按鈕使紅了。我如何才能只在editor1 div中突出顯示的文本？

來源

2016-08-04 cosmo

它是瀏覽器？在鉻51它的作品 – avck

我知道該功能的作品;但我不希望除了「editor1」以外的任何東西都能夠改變顏色。在小提琴中向下滾動; div外面還有一行文字，也可以用按鈕將它們染成紅色 - 我不想那樣;我只希望任何文字INSIDE div都能夠被着色。 – cosmo

你都能夠得到使用.baseNode選擇的節點元素。從那裏你可以得到父節點並將其用於比較。

function red(){ 
    // If it's not the element with an id of "foo" stop the function and return 
    if(window.getSelection().baseNode.parentNode.id != "foo") return; 
    ... 
    // Highlight if it is our div. 
}

在下面的例子中我做了div有id，你可以檢查，以確保它是要素：

Demo

由於@ z0mBi3指出，這將第一次工作。但可能不適用於許多亮點（，如果它們碰巧清除了）。在div內的<span>元素創建層次結構，其中div是許多span元素的父元素。解決方案是通過節點的祖先遍歷，直到找到一個id爲"foo"的節點。

幸運的是，你可以用自己的方法.closest()使用jQuery來爲你做的：

if($(window.getSelection().baseNode).closest("#foo").attr("id") != "foo") return;

Here is an answer with a native JS implemented method of .closest()。

來源

2016-08-04 05:17:59

您可能需要遞歸查詢parentNode直到你到達身體的CONTENTEDITABLE將創建不同的層級多個標籤。 – z0mBi3

@ z0mBi3好點，因爲這只是一個*「突出一次」*的東西，它會工作。我建議OP使用jQuery的'.closest（）'函數。我會在編輯中提到這一點。 –

您是否在尋找這個，

//html 
    <body> 
    <p id='editor1'>asdf</p> 
    <button onclick='red()'> 
    RED 
    </button> 
    </body> 

    //JavaScript 

    window.red = function(){ 
     //var getText = document.getElementById("editor1").innerHTML; 
     var selection = window.getSelection().getRangeAt(0); 
     var selectedText = selection.extractContents(); 
     var span = document.createElement("span"); 
     span.style.color = "red"; 
     span.appendChild(selectedText); 
     selection.insertNode(span); 
    }

Plunker：https://plnkr.co/edit/FSFBADoh83Pp93z1JI3g?p=preview

來源

2016-08-04 05:01:55

我已經有了工作功能，我編輯了我的問題來突出顯示問題。 – cosmo

對不起，我不確定你的問題是什麼。你的意思是說當你在div和outside div裏面突出顯示時，並且點擊你想要div裏面的元素的按鈕只會被突出顯示爲Red？ –

這正是問題所在。我掛一把小提琴，顯示確切的問題：HTTPS：//jsfiddle.net/xacqzhvq/ – cosmo

如何getSelection（）在一個特定的div？

回答

相關問題