Как я могу отдельно получить HTML, который находится до и после дочернего элемента внутри родительского элемента?

Question

Мы пишем веб-приложение, которое использует Javascript / jQuery.Это вовлекает пользователей, заполняющих отдельные слова в большой блок текста, вроде Mad Libs.Мы создали своего рода формат HTML, который мы используем для написания большого блока текста, которым мы затем манипулируем с помощью jQuery, когда пользователь заполняет его.

Часть блока текста может выглядеть следующим образом:

<span class="fillmeout">This is a test of the <span>NOUN</span> Broadcast System.</span>

Учитывая эту разметку, мне нужно отдельно извлекать текст и манипулировать им до и после внутреннего <span>;мы называем их «префикс» и «суффикс».

Я знаю , что вы не можете проанализировать HTML с помощью простой манипуляции со строками , но я все равно попробовал;Я пытался использовать split() для тегов <span> и </span>.Это казалось достаточно простым.К сожалению, Internet Explorer переводит все HTML-теги в верхний регистр, поэтому такая техника не работает.Я мог бы написать специальный случай, но ошибка научила меня делать это правильно.

Я знаю, что мог бы просто использовать дополнительные HTML-теги для ручного обозначения префикса и суффикса, но это кажется уродливым и избыточным;Я хотел бы, чтобы наш формат разметки был как можно меньше и удобнее для чтения и записи.

Я просмотрел документы jQuery и не могу найти функцию, которая делает именно то, что мне нужно.В есть все виды функций для добавления материала до и после, вокруг и внутри элементов, но я не могу найти для извлечения того, что уже есть.Я мог бы удалить внутреннюю <span>, но тогда я не знаю, как определить, что было до удаленного элемента, кроме того, что было после него.

Есть ли "право""способ сделать то, что я пытаюсь сделать?

Answer 1

Для полноты я подумал, что должен указать, что самый простой ответ - поместить текст префикса и суффикса в свой собственный <span>, как это, а затем вы можете использовать селекторы и методы jQuery для прямого доступа к нужному тексту:*

<span class="fillmeout">
    <span class="prefix">This is a test of the </span>
    <span>NOUN</span>
    <span class="suffix"> Broadcast System.</span>
</span>

Тогда код будет таким простым:

var fillme = $(".fillmeout").eq(0);
var prefix = fillme.find(".prefix").text();
var suffix = fillme.find(".suffix").text();

К вашему сведению, я бы не назвал этот уровень простоты "безобразным и избыточным", как вы предполагали.Вы используете разметку HTML для разделения текста на отдельные элементы, к которым вы хотите получить отдельный доступ.Это просто умно, а не избыточно.

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

Элементы HTML похожи на коробки.Они являются контейнерами для вашего текста.Если вы хотите, чтобы текст был выделен в будущем, вы также можете поместить каждый фрагмент текста в свой собственный именованный контейнер, чтобы в будущем легко было получить доступ только к этому фрагменту текста.

Answer 2

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

Answer 3

Используйте свой jQuery API!$('.fillmeout').children() и затем вы можете манипулировать этим элементом по мере необходимости.

http://api.jquery.com/children/

Answer 4

С помощью простых манипуляций со строками вы также можете использовать Regex. Это должно решить вашу проблему.

var array = $('.fillmeout').html().split(/<\/?span>/i);

Answer 5

Вы можете просто использовать nextSibling и previousSibling собственный JavaScript (в сочетании с селекторами jQuery):

$('.fillmeout span').each(
    function(){
        var prefix = this.previousSibling.nodeValue,
            suffix = this.nextSibling.nodeValue;
    });

JS Fiddle доказательство концепции .

Ссылки:

• each().
• node.nextSibling.
• node.previousSibling.

Answer 6

Если вы хотите использовать DOM вместо того, чтобы разбирать HTML самостоятельно, и вы не можете поместить нужный текст в его собственные элементы, то вам нужно будет просмотреть DOM для текстовых узлов и найти текстовые узлы до и после тег span.

jQuery не очень помогает при работе с текстовыми узлами, а не с элементами, поэтому работа в основном выполняется в простом javascript, как это:

$(".fillmeout").each(function() {
    var node = this.firstChild, prefix = "", suffix = "", foundSpan = false;
    while (node) {
        if (node.nodeType == 3) {
            // if text node
            if (!foundSpan) {
                prefix += node.nodeValue;
            } else  {
                suffix += node.nodeValue;
            }
        } else if (node.nodeType == 1 && node.tagName == "SPAN") {
            // if element and span tag
            foundSpan = true;
        }
        node = node.nextSibling;
    }
    // here prefix and suffix are the text before and after the first
    // <span> tag in the HTML
    // You can do with them what you want here
});

Примечание. Этот код не предполагает, что весь текст перед диапазоном находится в одном текстовом узле и только в одном текстовом узле. Это может быть, но это также может быть и не так, так как он объединяет все текстовые узлы до и после тега span. Код был бы проще, если бы вы могли просто ссылаться на один текстовый узел на каждой стороне, но он не на 100% уверен, что это безопасное предположение.

Этот код также обрабатывает случай, когда нет текста до или после интервала.

Вы можете увидеть, как это работает здесь: http://jsfiddle.net/jfriend00/P9YQ6/

Answer 7

Исходя из вашего примера, вы можете использовать свою цель в качестве разделителя для разделения предложения.

var str = $('.fillmeout').html();
str = str.split('<span>NOUN</span>');

Это вернет массив ["This is a test of the ", " Broadcast System."]. Вот пример jsFiddle .

Answer 8

Вы можете использовать

$('.fillmeout span').get(0).previousSibling.textContent
$('.fillmeout span').get(0).nextSibling.textContent

Это работает в IE9, но, к сожалению, не в версиях IE меньше 9.

Answer 9

Я не уверен, что это тоже «правильный» путь, но вы могли бы заменить SPAN элементом, на который можно последовательно разбить строку:

http://jsfiddle.net/mdarnell/P24se/