如何在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

在您的情况下：

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

Answer 4

没有jQuery：

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

Answer 5

对于单个元素（您似乎在问）：

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

对于页面上的每个元素（如您的示例所示），将其应用于每个元素。

Answer 6

使用jQuery *：

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

如果您知道这些元素没有嵌套元素，则最好使用简单的元素：

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

（*）使用jQuery而不是简单的javascript的原因是浏览器（我正在看着您，即IE）具有用于获取和设置这些值的不同的内置属性。 jQuery使您不必担心这一点。