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使您不必担心这一点。

如何在DOM元素的内容之前和之后插入空格？

6 个答案: