Làm cách nào để đánh dấu văn bản của đối tượng Phạm vi DOM?

Question

Tôi chọn một số văn bản trên trang html (mở bằng firefox) bằng chuột và sử dụng các hàm javascript, tôi tạo/lấy phạm vi từ tương ứng với văn bản đã chọn.

userSelection =window.getSelection(); 
var rangeObject = getRangeObject(userSelection); 

Bây giờ tôi muốn nhấn mạnh tất cả các văn bản mà đi kèm theo rangeobject.I đang làm nó như thế này,

var span = document.createElement("span"); 
    rangeObject.surroundContents(span); 
    span.style.backgroundColor = "yellow"; 

Vâng, điều này hoạt động tốt, chỉ khi rangeobject (startpoint và thiết bị đầu cuối) nằm trong textnode cùng, sau đó nó nhấn mạnh text.Ex tương ứng

<p>In this case,the text selected will be highlighted properly, 
     because the selected text lies under a single textnode</p> 

Nhưng nếu rangeobject bao gồm hơn một textnode, sau đó nó không được làm việc properlay, nó nhấn mạnh chỉ những văn bản mà nằm trong văn bản đầu tiên, Ex

<p><h3>In this case</h3>, only the text inside the header(h3) 
    will be highlighted, not any text outside the header</p> 

Bất kỳ ý tưởng nào tôi có thể tạo, tất cả văn bản nằm trong một nút hoặc nhiều nút? Cảm ơn ....

Answer 1

Tôi khuyên bạn nên sử dụng phương thức document hoặc TextRange 'execCommand, được xây dựng chỉ với mục đích như vậy, nhưng thường được sử dụng trong tài liệu có thể chỉnh sửa. Đây là câu trả lời tôi đưa ra cho một câu hỏi tương tự:

Sau đây nên làm những gì bạn muốn. Trong các trình duyệt không phải IE, nó bật designMode, áp dụng một màu nền và sau đó chuyển đổi designMode off một lần nữa.

CẬP NHẬT

cố định để làm việc trong IE 9.

CẬP NHẬT 12 Tháng chín 2013

Dưới đây là một liên kết quy định chi tiết một phương pháp để loại bỏ điểm nổi bật tạo ra bằng phương pháp này:

https://stackoverflow.com/a/8106283/96100

function makeEditableAndHighlight(colour) { 
    var range, sel = window.getSelection(); 
    if (sel.rangeCount && sel.getRangeAt) { 
     range = sel.getRangeAt(0); 
    } 
    document.designMode = "on"; 
    if (range) { 
     sel.removeAllRanges(); 
     sel.addRange(range); 
    } 
    // Use HiliteColor since some browsers apply BackColor to the whole block 
    if (!document.execCommand("HiliteColor", false, colour)) { 
     document.execCommand("BackColor", false, colour); 
    } 
    document.designMode = "off"; 
} 

function highlight(colour) { 
    var range; 
    if (window.getSelection) { 
     // IE9 and non-IE 
     try { 
      if (!document.execCommand("BackColor", false, colour)) { 
       makeEditableAndHighlight(colour); 
      } 
     } catch (ex) { 
      makeEditableAndHighlight(colour) 
     } 
    } else if (document.selection && document.selection.createRange) { 
     // IE <= 8 case 
     range = document.selection.createRange(); 
     range.execCommand("BackColor", false, colour); 
    } 
} 

Answer 2

Bạn có thể giải thích nhu cầu của chức năng này không. Nếu bạn chỉ muốn thay đổi phong cách nổi bật của văn bản đã chọn bạn có thể sử dụng CSS: ':: lựa chọn'

More Info: http://www.quirksmode.org/css/selection.html https://developer.mozilla.org/en/CSS/::selection

Answer 3

Bạn có thể thử thêm một lớp cho khoảng xung quanh và áp dụng CSS phân cấp?

var span = document.createElement("span"); 
span.className="selection"; 
rangeObject.surroundContents(span); 

Trong định nghĩa CSS,

span.selection, span.selection * { 
    background-color : yellow; 
} 

Tôi không thử nó. Nhưng chỉ đoán rằng nó sẽ hoạt động.

Answer 4

Rangy là thư viện lựa chọn và phạm vi trình duyệt chéo giải quyết vấn đề này một cách hoàn hảo với CSS Class Applier module.Tôi đang sử dụng nó để thực hiện làm nổi bật trên một loạt các trình duyệt máy tính để bàn và trên iPad và nó hoạt động hoàn hảo.

Câu trả lời của Tim Down thật tuyệt vời nhưng Rangy không cho phép bạn tự viết và duy trì tất cả mã phát hiện tính năng đó.