Найти "Greatest Common Div" для пользовательского выбора

Question

Привет всем, вы смешно гениальные люди!

Итак, я создаю базовый текстовый процессор, и мне нужно иметь возможность очищать форматирование в определенном разделе. Место, которое пользователь вводит, разбивается на несколько разных разделов, и всякий раз, когда они нажимают кнопку ввода, начинается новый div. Когда они добавляют стиль (Bold, курсивом и т. Д.), Он размещает правильный тег html.

Ну, я хочу, чтобы пользователь мог очистить все форматирование текста, который они выделяют. Для этого мне нужно найти элемент, который все они разделяют. поэтому, если он отображается «Вот мой текст» в структуре, как это:

<div id="1"> 
    <div>Here</div> 
    <div>is</div> 
    <div>some</div> 
    <div>text</div> 
</div> 

и пользователь отметил все 4 слова, я должен был бы компьютер, чтобы дать мне DIV с идентификатором «1», потому что это что все они имеют общего.

Я полностью в тупике, и не имею понятия, с чего начать, поэтому у меня действительно нет кода для вас. Я буду использовать window.getSelected();, чтобы получить фактический текст, но я понятия не имею, как найти разборки вокруг него.

Благодарим за помощь!

Answer 1

Если вы используете window.getSelection(), он возвращает объект выбора, который содержит свойства .anchorNode и .focusNode, которые являются узлами в начале и конце выбора. Затем вы можете использовать эти узлы, чтобы подойти к родительской цепочке, чтобы найти любой желаемый уровень родителя.

Ближайший общий родительский объект можно найти, получив непосредственного родителя первого объекта, а затем посмотрев, является ли он также родителем второго объекта. Если нет, поднимитесь на одного родителя выше, пока вы в конце концов не найдете общего родителя.

function findCommonParentElement(startNode, endNode) { 

    // see if node has a particular parent 
    // by walking up the parent chain and comparing parents 
    function hasParent(node, parent) { 
     while (node && node !== parent && node !== document.body) { 
      node = node.parentNode; 
     } 
     return node === parent; 
    } 

    // for text nodes, get the containing element 
    // for elements, just return what was passed in 
    function getElement(node) { 
     while (node && node.nodeType !== 1) { 
      node = node.parentNode; 
     } 
     return node; 
    } 

    // go up the parent chain of endNode looking for a node 
    // that startNode has as a parent  
    while (endNode && !hasParent(startNode, endNode)) { 
     endNode = endNode.parentNode; 
    } 
    // return the containing element - so it won't return a textnode 
    return getElement(endNode); 
} 

// Usage: 
var sel = window.getSelection(); 
var commonParent = findCommonParentElement(sel.anchorNode, sel.focusNode); 

Работа демо: http://jsfiddle.net/jfriend00/GV96w/