Удалите все пробелы между тегами с помощью JavaScript

Я пытаюсь удалить пробел между тегами, чтобы дочерние коды содержали только те узлы тегов, а не узлы пробела. Вот мой код : 

<li>            
    <label for="firstName"  class="mainLabel">First Name : </label>                                 
    <input type="text" name="firstName" id="firstName"/>                                    
    <span>This must be filled</span>
</li>

и вот код JS:

var parentHTML = firstName.parentNode.innerHTML;
parentHTML = parentHTML.replace(/>n</g,"><");
firstName.parentNode.innerHTML = parentHTML;

но, когда я насторожился parentHTML Я получаю ту же самую старую строку.

9
javascript regex whitespace

5 ответов

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

вместо этого я бы предложил:

var firstname = document.getElementsByTagName('input')[0],
    parentHTML = firstname.parentNode.innerHTML,
    newHTML = parentHTML.replace(/\>\s+\</g,'');
firstname.parentNode.innerHTML = newHTML;

console.log(parentHTML, newHTML, (parentHTML == newHTML));

JS Fiddle demo.

что касается комментария от jfriend00 (ниже), кажется, регулярное выражение было проблемой,\n не соответствуют образцу, в случае следующая поправка удовлетворяет требованиям teh:

var firstname = document.getElementsByTagName('input')[0],
    parentHTML = firstName.parentNode.innerHTML;
parentHTML = parentHTML.replace(/>\s+</g, "><");
firstName.parentNode.innerHTML = parentHTML;

console.log(firstname, parentHTML);​

JS Fiddle demo.

ссылки:

18

только пробелы:

parentHTML = parentHTML.replace( new RegExp( "\>[ ]+\<" , "g" ) , "><" );

новая строка, вкладки и пробелы:

parentHTML = parentHTML.replace( new RegExp( "\>[\s]+\<" , "g" ) , "><" );

https://regex101.com/r/sD7cT8/1

10

в большинстве случаев я рекомендую удалить пространство из:

  • начало документа
  • конец документа
  • после > символ
  • до < символ

есть два случая, когда я могу думать, где это не будет делать то, что вы хотите, и это те же два случая, которые влияют на менее агрессивные решения выше.

  • пустое пространство между inline-block элементов фактически предполагаемая или ожидаемая часть макета. Если это пространство свернуто до нуля символов, неявное пространство между элементами удаляется. Этого можно избежать, изменив мое регулярное выражение, чтобы заменить " ".

  • мой оригинальный ответ был обновлен, чтобы сохранить пробелы в <script>, <style>, <pre> или <textarea> теги. Все, кроме <pre> являются CDATA, что означает, что содержимое не является HTML и анализируется до тех пор, пока не будет найден закрывающий тег, который означает, что регулярное выражение является полным решением. Если a <pre> является вложенным или white-space используется свойство CSS, это не сохранит ваш контент.

решение:

    collapsed = expanded.replace(/(<(pre|script|style|textarea)[^]+?<\/)|(^|>)\s+|\s+(?=<|$)/g, "");
10

можете ли вы рассматривать HTML-тег как строку в js? Думаю, это можно сделать. попробуйте это!

s.replace(/\s+/g, ' ');
3

я наткнулся на этот поток, потому что я искал решение для устранения пробелов вокруг divs, вызванных пробелами в источнике HTML или в моем случае.

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

Я начал с создания следующей функции и вызова ее в body onload.

function Compress_Html() {
    //Remove whitespace between html tags to prevent gaps between divs.
    document.body.innerHTML = document.body.innerHTML.replace( /(^|>)\s+|\s+(?=<|$)/g, "" );
}

Это, казалось, работает отлично, но, к сожалению, он ломает окно поиска Google, которое у меня есть в нижнем колонтитуле.

после попытки многих вариантов шаблона regex без успеха, я нашел этот тестер regex в http://www.regexpal.com/. Насколько я могу судить, следующий шаблон делает то, что мне нужно.

( /(^|>)[ \n\t]+/g, ">" )

об этом сказал функция все еще ломала окно поиска. Поэтому я в конечном итоге переместил его в функцию jQuery document ready. Теперь он работает и не разбивает окно поиска.

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $( document ).ready(function() {
        document.body.innerHTML = document.body.innerHTML.replace( /(^|>)[ \n\t]+/g, ">" );
    });
</script>
0