Удалите пробелы и разрывы строк между элементами HTML с помощью jQuery.

Я попробовал метод, который выложил пользователь 76888, и он работал хорошо. Я упаковал его в плагин jQuery для удобства и подумал, что сообществу он может понравиться, поэтому вот:

jQuery.fn.cleanWhitespace = function() {
    this.contents().filter(
        function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
        .remove();
    return this;
}

Чтобы использовать это, просто включите его в тег script, затем выберите тег для очистки с помощью jQuery и вызовите функцию следующим образом:

$('#widget').cleanWhitespace();

Рекурсивная версия:

jQuery.fn.htmlClean = function() {
    this.contents().filter(function() {
        if (this.nodeType != 3) {
            $(this).htmlClean();
            return false;
        }
        else {
            this.textContent = $.trim(this.textContent);
            return !/\S/.test(this.nodeValue);
        }
    }).remove();
    return this;
}

Я думаю, это сделает это...

cleanWhitespace: function(element) {
 element = $(element);
 for (var i = 0; i < element.childNodes.length; i++) {
   var node = element.childNodes[i];
   if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
     Element.remove(node);
 }
}

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

Это то, что сработало для меня и пошаговое открытие:

Вывод из консоли chrome

Сначала найдите родительский узел, содержащий неприятные пробелы.

$('.controls label[class="radio"]').parent();

[<div class=​"controls">​
<label class=​"radio">​…​</label>​
" "
"    "
<label class=​"radio">​…​</label>​
" "
"    "
</div>​]

Вы можете видеть, что это завернуто в массив из скобок [] jQuery всегда будет возвращать структуру, подобную массиву, даже если был найден один элемент.

Итак, чтобы добраться до HTMLElement, мы берем первый элемент массива с индексом 0.

$('.controls label[class="radio"]').parent()[0];

<div class=​"controls">​
<label class=​"radio">​…​</label>​
" "
"    "
<label class=​"radio">​…​</label>​
" "
"    "
</div>​

Обратите внимание, что скобок [] больше нет. Причина, по которой нам нужно это сделать, заключается в том, что jQuery будет игнорировать пробелы в dom, а HTMLElement — нет. Посмотрите, что происходит, когда мы обращаемся к свойству childNodes.

$('.controls label[class="radio"]').parent()[0].childNodes;

[<label class=​"radio">​…​</label>​, 
" ", 
"    ", 
<label class=​"radio">​…​</label>​, 
" ", 
"    "]

У нас снова есть массив, да, вы замечаете скобки [], но видите ли вы другое отличие, посмотрите на все запятые, которых мы не смогли получить с помощью jQuery. Спасибо, HTMLElement, но теперь мы можем вернуться к jQuery, потому что я хочу использовать каждый вместо цикла for, вы согласны со мной? Итак, давайте обернем массив в jQuery и посмотрим, что произойдет:

$($('.controls label[class="radio"]').parent()[0].childNodes);

[<label class=​"radio">​…​</label>​, 
" ", 
"    ", 
<label class=​"radio">​…​</label>​, 
" ", 
"    "]

Идеально! у нас есть точно такая же структура, но теперь внутри объекта jQuery, поэтому давайте вызовем каждый и выведем «это» на консоль, чтобы увидеть, что у нас есть.

$($('.controls label[class="radio"]').parent()[0].childNodes).each(function () { 
   console.log('|'+$(this).html()+'|');
});

|<input id="gender_f" name="gender" type="radio" value="f">Female|
|undefined|
|undefined|
|<input id="gender_m" name="gender" type="radio" value="m" checked="">Male|
|undefined|
|undefined|

Итак, мы используем jQuery для получения HTML-кода каждого элемента, стандартный материал `$(this).html, и, поскольку мы не видим пробелов, давайте заполним его вертикальной чертой |, хороший план, но что у нас здесь есть? Как видите, jQuery не умеет превращать пробелы в html, и теперь у нас есть undefined. Но это даже лучше, потому что там, где пробел может быть истинным undefined, он определенно ложный =)

Итак, давайте избавимся от лохов с помощью jQuery. Все, что нам нужно, это $(this).html() || $(this).remove(); давайте посмотрим:

$($('.controls label[class="radio"]').parent()[0].childNodes).each(function () { 
   $(this).html() || $(this).remove();
});

[<label class=​"radio">​…​</label>​, 
" ", 
"    ", 
<label class=​"radio">​…​</label>​, 
" ", 
"    "]

О, дорогая.. но не бойся! Каждый по-прежнему возвращает предыдущую структуру, а не ту, которую мы изменили, давайте посмотрим, что теперь возвращает наш первоначальный запрос.

$('.controls label[class="radio"]').parent();

[<div class=​"controls">​
<label class=​"radio">​…​</label>​
<label class=​"radio">​…​</label>​
</div>​]

И Валла! Все сексуально и красиво =)

Итак, у вас есть, как удалить пробелы между элементами/тегами в стиле jQuery.

нРадость!

Мне пришлось немного изменить принятый ответ, потому что по какой-то причине хром не хотел удалитьChild() на узлах с пробелами. Если это произойдет, вы можете заменить узел пустым текстовым узлом, как в этом примере вспомогательной функции:

 var removeWhiteSpaceNodes = function ( parent ) {
    var nodes = parent.childNodes;
    for( var i =0, l = nodes.length; i < l; i++ ){
      if( nodes[i] && nodes[i].nodeType == 3 && !/\S/.test( nodes[i].nodeValue ) ){
        parent.replaceChild( document.createTextNode(''), nodes[i]  );
      }else if( nodes[i] ){
        removeWhiteSpaceNodes( nodes[i] );
      }
    }
  }

Он берет узел, из которого вы хотите удалить пробелы, и рекурсивно заменяет все дочерние пробелы действительно пустым текстовым узлом.

Использовать

$($.parseHTML(widgetHTML, document, true)).filter("*"),

Вы можете $.trim(widgetHTML); прочитать окружающие пробелы.