Как вставить пробел до и после содержимого элемента DOM?

Question

Если у меня есть

<p>someword here</p>
<span>another thing here</span>
<div id="text">other thing here</div>
<!-- any other html tags -->

Как вставить пробел в первой и последней позиции содержимого?

Я хочу, чтобы результат был

<p> someword here </p>
<span> another thing here </span>
<div id="text"> other thing here </div>
<!-- after tags like <p> and before </p> there have one space -->

Answer 1

Пример

Наивный (и неверный! ) будет:

var victims = document.querySelectorAll('body *');
for( var i = 0; i < victims.length; i++ ) {
    victims[i].innerHTML = " " + victims[i].innerHTML + " ";
}

Но как только вы запустите его, вы обнаружите, что все ваши элементы были уничтожены!Потому что, когда вы меняете innerHTML, вы также изменяете дочерние элементы.Но мы можем избежать этого, не заменяя контент, а добавляя его:

var padLeft = document.createTextNode( " " );
var padRight = document.createTextNode( " " );
victims[i].appendChild( padRight );
victims[i].insertBefore( padLeft, victims[i].firstChild );

Выглядит круто!Но, о нет, мы испортили теги нашего скрипта, изображения и так далее.Давайте исправим это тоже:

var victims = document.querySelectorAll('body *');
for( var i = 0; i < victims.length; i++ ) {
  if( victims[i].hasChildNodes ) {
    var padLeft = document.createTextNode( " " );
    var padRight = document.createTextNode( " " );
    victims[i].appendChild( padRight );
    victims[i].insertBefore( padLeft, victims[i].firstChild );
  }
}

Вот вам сценарий :) Он не кросс-браузерный вплоть до Netscape4, но достаточно для понимания основной идеи.

Answer 2

Если вы настаиваете на использовании JS + RegExp для заполнения каждого элемента innerHTML, то вы могли бы сделать:

var 
    r = /(<[^>]+>)(.*)(<\/[^>]+>)/g,
    func = function(str) { 
        return str.replace(r, function(original, a, b, c) {
            return a + ' ' + (r.test(b) ? func(b) : b) + ' ' + c;
        });
    };

func("<p name='somename'>someword here</p>");
// "<p name='somename'> someword here </p>"

func("<div>I have things here<span>And more here<p>And even more here</p></span></div>");
// "<div> I have things here<span> And more here<p> And even more here </p> </span> </div>"

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

Answer 3

Нет запросов:

var els =document.getElementsByTagName('*'), el;
for(var i = 0; i < els.length; i++) {
    el = els[i]
    el.innerHTML = ' ' + el.innerHTML +    ' ';
}

Answer 4

в вашем случае:

$("*").html(function(index, html){ return " " + html + " "; });

Answer 5

С jQuery *:

$('#id').html(' ' + $('#id').html() + ' ');

Если вы знаете, что у элементов нет вложенных элементов, было бы лучше использовать более простые:

$('#id').text(' ' + $('#id').text() + ' ');

(*) Причина использования jQuery, а не простого javascript заключается в том, что браузеры (я смотрю на вас, IE) имеют разные встроенные свойства для получения и установки этих значений.jQuery избавляет вас от необходимости беспокоиться об этом.

Answer 6

Для одного элемента (как вы, кажется, спрашиваете):

element.html(' ' + element.html() + ' ')

Для каждого элемента на странице (как показывает ваш пример), примените это к каждому элементу.