使用JavaScript突出顯示文本範圍

Question

我想突出顯示（應用css）某個文本範圍，以其開始和結束位置表示。這比看起來更不明顯，因爲文本中可能有其他標籤，需要忽略。

例：

<div>abcd<em>efg</em>hij</div> 

highlight(2, 6)需要突出"cdef「不刪除標記

我一直在使用一個TextRange對象試過了，但都沒有成功

提前感謝

！

Answer 1

下面是設置一個特定元素中選擇的一對字符偏移量的函數。這是天真的實現：它沒有考慮任何可能被隱藏的文本（例如，通過CSS或者通過在<script>或<style>元素中），並且可能存在瀏覽器差異（IE與其他所有內容）和換行符，並且不考慮摺疊的空白（例如，2個或多個連續的空格字符摺疊到頁面上的一個可見空間）。但是，它適用於所有主流瀏覽器中的示例。

對於其他部分，突出顯示，我建議使用document.execCommand()。您可以使用我的以下功能設置選項，然後致電document.execCommand()。您需要在非IE瀏覽器中臨時編輯文檔才能使該命令生效。見我的答案在這裏代碼：getSelection & surroundContents across multiple tags

這裏是展示整個事情的jsfiddle例如，在所有主要的瀏覽器中工作：http://jsfiddle.net/8mdX4/1211/

和選擇設置代碼：

function getTextNodesIn(node) { 
    var textNodes = []; 
    if (node.nodeType == 3) { 
     textNodes.push(node); 
    } else { 
     var children = node.childNodes; 
     for (var i = 0, len = children.length; i < len; ++i) { 
      textNodes.push.apply(textNodes, getTextNodesIn(children[i])); 
     } 
    } 
    return textNodes; 
} 

function setSelectionRange(el, start, end) { 
    if (document.createRange && window.getSelection) { 
     var range = document.createRange(); 
     range.selectNodeContents(el); 
     var textNodes = getTextNodesIn(el); 
     var foundStart = false; 
     var charCount = 0, endCharCount; 

     for (var i = 0, textNode; textNode = textNodes[i++];) { 
      endCharCount = charCount + textNode.length; 
      if (!foundStart && start >= charCount 
        && (start < endCharCount || 
        (start == endCharCount && i <= textNodes.length))) { 
       range.setStart(textNode, start - charCount); 
       foundStart = true; 
      } 
      if (foundStart && end <= endCharCount) { 
       range.setEnd(textNode, end - charCount); 
       break; 
      } 
      charCount = endCharCount; 
     } 

     var sel = window.getSelection(); 
     sel.removeAllRanges(); 
     sel.addRange(range); 
    } else if (document.selection && document.body.createTextRange) { 
     var textRange = document.body.createTextRange(); 
     textRange.moveToElementText(el); 
     textRange.collapse(true); 
     textRange.moveEnd("character", end); 
     textRange.moveStart("character", start); 
     textRange.select(); 
    } 
} 

Answer 2

以下解決方案不適用於IE，您需要應用TextRange對象等。這款採用選擇執行此，它不應該打破HTML在正常情況下，例如：

<div>abcd<span>efg</span>hij</div> 

隨着highlight(3,6);

輸出：

<div>abc<em>d<span>ef</span></em><span>g</span>hij</div> 

必須注意它是如何包裝第一跨越的字符變爲em，然後將其餘的span轉換爲新的字符。在那裏，好像它只是打開它在字符3和第6個字母結束，它會給合法的標記，如：

<div>abc<em>d<span>ef</em>g</span>hij</div> 

代碼：

var r = document.createRange(); 
var s = window.getSelection() 

r.selectNode($('div')[0]); 
s.removeAllRanges(); 
s.addRange(r); 

// not quite sure why firefox has problems with this 
if ($.browser.webkit) { 
    s.modify("move", "backward", "documentboundary"); 
} 

function highlight(start,end){ 
    for(var st=0;st<start;st++){ 
     s.modify("move", "forward", "character"); 
    } 

    for(var st=0;st<(end-start);st++){ 
     s.modify("extend", "forward", "character"); 
    } 
} 

highlight(2,6); 

var ra = s.getRangeAt(0); 
var newNode = document.createElement("em"); 
newNode.appendChild(ra.extractContents()); 
ra.insertNode(newNode); 

例子：http://jsfiddle.net/niklasvh/4NDb9/

編輯看起來像至少我的FF4有一些問題

s.modify("move", "backward", "documentboundary"); 

，但在同一時間，似乎沒有它的工作，所以我只是把它改爲

if ($.browser.webkit) { 
     s.modify("move", "backward", "documentboundary"); 
} 

編輯 蒂姆指出的那樣，修改只能從FF4起，所以我採取了不同的方法來獲得選擇，而不需要修改方法，希望能夠讓瀏覽器兼容一些（IE仍然需要它自己的解決方案）。

的代碼：

var r = document.createRange(); 
var s = window.getSelection() 

var pos = 0; 

function dig(el){ 
    $(el).contents().each(function(i,e){ 
     if (e.nodeType==1){ 
      // not a textnode 
     dig(e); 
     }else{ 
      if (pos<start){ 
       if (pos+e.length>=start){ 
       range.setStart(e, start-pos); 
       } 
      } 

      if (pos<end){ 
       if (pos+e.length>=end){ 
       range.setEnd(e, end-pos); 
       } 
      }    

      pos = pos+e.length; 
     } 
    }); 
} 
var start,end, range; 

function highlight(element,st,en){ 
    range = document.createRange(); 
    start = st; 
    end = en; 
    dig(element); 
    s.addRange(range); 

} 
highlight($('div'),3,6); 

var ra = s.getRangeAt(0); 

var newNode = document.createElement("em"); 
newNode.appendChild(ra.extractContents()); 
ra.insertNode(newNode); 

例如：http://jsfiddle.net/niklasvh/4NDb9/

Answer 3

你可以看看這個功能強大的JavaScript實用程序支持多DOM元素選擇：

MASHA（Mark的簡寫&股）讓你標記的網頁內容有趣的部分，並分享

http://mashajs.com/index_eng.html

這也是在GitHub上https://github.com/SmartTeleMax/MaSha

即使在移動Safari和IE作品！