How do I insert a space before and after the content of a DOM element?

Question

If i have

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

How do I insert a space in first and last position of the content?

I want the result to be

<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 -->

@Marshall, @harpo, yes. all the elements on the page, and may be elements inside other elements. is there have a quick way to REX `>` and `<` to `/\w/`? — cj333, Sep 21 '11 at 18:04
Why wouldn't you use CSS to add some padding instead of modifying the markup? — user113716, Sep 21 '11 at 18:20

score 8 · Answer 1 · edited Sep 21 '11 at 20:01

Naive (and incorrect!) example would be:

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

But once you run it, you will find out that all your elements got destroyed! Because, when you are changing innerHTML, you are changing element children as well. But we can avoid that, by not replacing content, but adding it:

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

Looks cool! But, o no - we ruin our script tags, images and so on. Lets fix that too:

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 );
  }
}

Here you got the script :) Its not cross-browser all the way down to Netscape4, but is enough to understand basic idea.

Good answer, you use the proper DOM methods instead of the innerHTML abuse all over everyone else's answers. — Incognito, Sep 21 '11 at 20:02

score 2 · Accepted Answer · answered Sep 21 '11 at 18:37

If you insist using JS + RegExp to pad every element's innerHTML then you could do:

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>"

This is just to show how you could do this, but I highly recommend against it. The examples I provide is extremely simple. Anything like a normal page (say, the one you are looking at now) has all sorts of tags. This would be extremely exhaustive. And not very wise.

Even with your recommendation against it, I feel it's important to re-enforce this is a very bad idea, and that using regular expressions to parse XML is just dumb. http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454 — Incognito, Sep 21 '11 at 20:09
Yeah Im not sure why this is 1) an answer at all and 2) the accepted answer. Something more like `container.appendChild( document.createTextNode( '\u00A0' ) );` would be much more appropriate. (where `\u00A0` adds a non-breaking space)... but if that's what the OP wants, then fine. But, nobody else in the world should ever consider this a viable solution, ever. — dudewad, Jun 15 '17 at 21:39

score 0 · Answer 3 · answered Sep 21 '11 at 17:58

0

For a single element (as you seem to be asking):

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

For every element on the page (as your example seems to indicate), apply that to each element.

answered Sep 21 '11 at 17:58

yoozer8

7,361
7
58
93

@harpo, thanks, is there a quickly way to use `Rex` because I want replace all the tags in the page. – cj333 Sep 21 '11 at 18:06

score 0 · Answer 4 · answered Sep 21 '11 at 17:59

0

With jQuery*:

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

If you know that the elements do not have nested elements, it would be better to use the simpler:

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

(*) The reason for using jQuery and not plain javascript is that browsers (I'm looking at you, IE), have different inbuilt properties for getting and setting these values. jQuery saves you from having to worry about that.

answered Sep 21 '11 at 17:59

harpo

41,820
13
96
131

@cj333, hmmm... modify every element in a live page using regex in javascript? You've driven me to wonder, why? – harpo Sep 21 '11 at 18:20

score 0 · Answer 5 · answered Sep 21 '11 at 18:38

0

in your case:

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

answered Sep 21 '11 at 18:38

roberkules

6,557
2
44
52

How do I insert a space before and after the content of a DOM element?

5 Answers5