Как удалить все нетекстовые узлы с начала содержимого div?

Как я могу удалить нетекстовые узлы (BR, пустые теги <p>, nbsp) из html div, но только те, которые появляются до появления первого текстового узла. Точно так же, как удаление начальных пробелов из обычной строки символов, но здесь для удаления начальных пробелов из строки HTML.

Я пробовал использовать регулярные выражения, но при таком подходе часто возникают проблемы. Я хотел бы сделать это с помощью NodeType и JQuery. Если у кого-то есть пример, поделитесь.

Спасибо!

UPDATE:

Возьмите следующий DIV: -

<div id="foo">
        <div>
            <div>
                <p>
                </p>
                <p>
                    &nbsp;
                </p>
                <br/>
                <p>
                    this is a test</p>
                <p>
                    &nbsp;
                </p>
                <br />
                <br>
                <p>
                    this is a fast test
                </p>
            </div>
        </div>
    </div>

При передаче «foo» функции удаления пробелов должно получиться следующее:

<div id="foo">
        <div>
            <div>
                <p>
                    this is a test</p>
                <p>
                    &nbsp;
                </p>
                <br />
                <br>
                <p>
                    this is a fast test
                </p>
            </div>
        </div>
    </div>

html jquery removing-whitespace
person teenup    schedule 22.09.2011    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Что-то вроде этого должно сделать это:

var $contents = $('#foo').contents();
var stopFiltering = false;

$contents.filter(function() {
    var isEmpty = $.trim($(this).text()) == '' ||
                  this.tagName == "BR";
    var shouldFilter = !stopFiltering && isEmpty;
    stopFiltering = stopFiltering || !isEmpty;
    return shouldFilter;
}).remove();

Это адаптация функции filter. Каждый элемент (включая текстовые узлы) проверяется на «пустоту» (isEmpty). После того, как будет виден первый непустой узел, shouldFiltering устанавливается в false, и таким образом условие фильтрации выражает ваши требования: выбирать пустые узлы и элементы перед первым непустым.

Посмотрите, как это работает.

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

person Jon    schedule 22.09.2011
comment
Но это удалит эти теги отовсюду в содержимом DIV, даже те, которые появляются после того, как фактический текст начался в DIV. - person teenup; 22.09.2011
comment
@PuneetDudeja: обновлен ответ, теперь он должен работать так, как вам нужно. - person Jon; 22.09.2011
comment
Спасибо! Я бы не опубликовал свой собственный ответ, но я увидел ваш измененный ответ после того, как только что опубликовал свой. - person teenup; 22.09.2011
comment
Это не работает для меня, потому что обрабатывает только непосредственные дочерние элементы, а не внутренние. Я пытался использовать рекурсию, чтобы изменить его, но не сделал этого. Кроме того, он не обрабатывает теги nbsp. Не могли бы вы изменить его, чтобы использовать рекурсию и обрабатывать внутренние? Тот, который я пробовал, находится в моем обновленном ответе ниже. - person teenup; 22.09.2011
comment
@PuneetDudeja: Пожалуйста, измените вопрос или опубликуйте JSfiddle с вашим входом и ожидаемым результатом, потому что не совсем понятно, чего именно вы хотите достичь. - person Jon; 22.09.2011
comment
@PuneetDudeja: И я отвечаю. - person Jon; 22.09.2011
comment
Это работает только с jsfiddle, но не с браузером. См. здесь: puneetdudeja.com/test1.html - person teenup; 22.09.2011
comment
@PuneetDudeja: Конечно, это не работает, потому что вы не загружаете jQuery успешно. Пожалуйста, устраняйте эти проблемы самостоятельно. - person Jon; 22.09.2011
comment
Нет, jquery загружается правильно. Он работает на хроме, но не на IE8. Это я только сейчас увидел. - person teenup; 22.09.2011
comment
давайте продолжим это обсуждение в чате - person teenup; 22.09.2011