Seçilen metinler için tüm DOM blok öğelerini al

Question

HTML belgelerinde metin seçerken, bir DOM öğesinin içinden başka bir öğeye, muhtemelen yol üzerindeki diğer öğelerin üzerinden geçmeye başlayabilirsiniz. DOM API'yi kullanarak, seçim aralığını, seçilen metinleri ve hatta seçilen tüm DOM öğelerinin ana öğesini (kullanılmış tarayıcıya dayalı olarak commonAncestorContainer veya parentElement() kullanarak) almak mümkündür. Ancak, bunların hepsini içeren tek ana öğeyi almanın dışında seçilen metinlerin öğelerini içeren tüm öğeleri listeleyebileceğinin farkında olmamın bir yolu yoktur. Ebeveynin kullanılması ve çocuk düğümleri arasında geçiş yapmak, bu ebeveynin içinde seçilmeyen başka kardeşler olabileceğinden bunu yapmayacaktır.

Seçili metinleri içeren tüm öğeleri alabilmemin bir yolu var. Temel olarak blok elemanlar (p, h1, h2, h3, ... vs) almakla ilgileniyorum ama tüm elementleri elde etmenin bir yolu varsa, o zaman bunlardan geçip neyi elde etmek için onları filtreleyebileceğime inanıyorum. istemek. Herhangi bir fikri ve öneriyi memnuniyetle karşılıyorum.

Teşekkür ederiz.

Answer 1

Anahtar İşte window.getSelection().getRangeAt(0)https://developer.mozilla.org/en/DOM/range

olan istediğini yapmak ile oynayabilir bazı örnek kod. Bunları gerçekten istediğiniz şeyden bahsetmek, insanların daha iyi yanıtlar vermesine yardımcı olacaktır.

var selection = window.getSelection(); 
var range = selection.getRangeAt(0); 
var allWithinRangeParent = range.commonAncestorContainer.getElementsByTagName("*"); 

var allSelected = []; 
for (var i=0, el; el = allWithinRangeParent[i]; i++) { 
    // The second parameter says to include the element 
    // even if it's not fully selected 
    if (selection.containsNode(el, true)) { 
    allSelected.push(el); 
    } 
} 


console.log('All selected =', allSelected); 

Bu en etkili yolu değil, nextSibling/previousSibling ve childNodes birlikte Range en startContainer/endContainer kullanarak DOM kendiniz çapraz olabilir.

Answer 2

Traversing from the jQuery API'u kullanabileceğiniz gibi görünüyor.

Muhtemelen .contents() yardımcı

Umut!

Answer 3

Bunu yapmak için Rangy library sayfamı kullanabilirsiniz. IE dahil tüm tarayıcılar için DOM Aralığı ve Seçim nesnelerinin bir uygulamasını sağlar ve Ekstra Aralığı yöntemleri vardır. Bunlardan biri getNodes() geçerli:

function isBlockElement(el) { 
    // You may want to add a more complete list of block level element 
    // names on the next line 
    return /h[1-6]|div|p/i.test(el.tagName); 
} 

var sel = rangy.getSelection(); 
if (sel.rangeCount) { 
    var range = sel.getRangeAt(0); 
    var blockElements = range.getNodes([1], isBlockElement); 
    console.log(blockElements); 
}