JavaScript: с учетом DOM найдите самый большой фрагмент непрерывного текста (часть содержимого)

Question

Цель состоит в том, чтобы найти самый большой фрагмент непрерывного текста в документе. Проблема в том, что самый большой кусок не лежит под одним элементом, например, сообщение в блоге, содержащее теги <p>, поэтому итерации узлов и сравнение innerHTML s не будут работать. И, получая innerText элемента, корневой узел всегда содержит самый большой текст. Так как же этого достичь?

Спасибо

Answer 1

Ваша проблема может быть сложной, потому что если есть div, который содержит 2 слова, плюс еще <p> внутри div с 200 словами, то вы считаете div, имеющий 202 слова, или Вы считаете, что p имеет 200 слов и, следовательно, является самым большим?

Если для p есть 4 границы, то имеет смысл сказать, что это p с 200 словами. Если границы отсутствуют, то имеет смысл сказать, что это div с 202 словами.

Вы можете попробовать написать функцию для обхода узла, и если есть какой-либо элемент block с 4 границами, тогда не включайте количество слов.

Вещи могут быть более сложными, если есть плавающие div с, которые установлены на display:inline, чтобы обойти ошибку IE 6. Или, если есть границы, но цвет совпадает с цветом фона содержащего div.

Если вас не волнуют внутренние элементы, имеющие границы, то одной попыткой может быть просто посмотреть на непосредственных потомков тела и выяснить, сколько символов внутри него (сумма текста по всем потомкам, возможно, используя innerText или innerHTML и удалите все теги).

Вы также можете найти самый большой элемент с самой большой площадью (ширина х высота), если вы ищете раздел контента, если только нет левой или правой длинной и узкой боковой панели или рекламного раздела с область контента широкая, но очень короткая.

Answer 2

Когда я начал печатать этот ответ, я собирался написать, что это довольно просто.Я думал о cloneNode (false).Затем я подумал о текстовых узлах, затем о функции нормализации, а затем о случае, когда текстовые узлы не смежны.

Помимо повторения всего DOM, вам нужно будет сделать следующее для каждого elementNode (NodeType = 1)

ElLength = thisEl.nodeValue.length ;
if (thisEl.hasChildNodes()){
    for each (node in thisEl.childNodes){
        if (node.nodeType == 3) { // textnode
            ElLength += node.data.length;
        }
    }
}

тогда вам придется запомнить самый большой ElLength и соответствующий элемент.

Это будет медленно, если ваш DOM огромен.

Код не был проверен... Я написал это только для примера

Answer 3

Самая эффективная тактика в очистке экрана - всегда определять шаблоны для каждого экземпляра того, что вы очищаете. Принимая во внимание, что большинство страниц в наши дни имеют контейнер «контент», все, что вам нужно сделать, это добавить имя div «контент» для каждого из ваших источников. Если вы очищаете блоги, это также становится намного проще, поскольку вы можете создавать правила для большинства популярных систем ведения блогов, поскольку они обычно имеют один и тот же контейнер контента в разных реализациях. Таким образом, вы можете сначала попробовать значения по умолчанию, и если они появятся пустыми, зарегистрируйте URL и вручную идентифицируйте контейнер.

Если вы действительно хотите автоматизировать это, вам, вероятно, (и я предполагаю здесь) необходимо сравнить размер узлов-братьев и проверить их тип дерева DOM на каждом уровне DOM и следовать только за самой большой веткой. Когда вы попадаете на уровень, где все братья и сестры являются текстовыми узлами, контейнер для них, скорее всего, ваш контейнер «основного контента». Вы можете сделать это, используя jQuery для итерации узла или просто "обычные" функции DOM javascript.