Replace spaces with Regex without replacing empty HTML tags

Question

I wish to replace spaces in something like this:

<span>5</span>SPACE<image href="mtgsymbol.png" />

but when I do so using:

card_cost=card_cost.replace(/\s/g,"");

it messes my css all up and the objects stack on each other like their position is changed to absolute.

How do I replace the spaces without breaking my css or document flow?

Example code:

Javascript:

card_cost=document.getElementById('card_cost').value;

if(card_cost)
{
card_cost=card_cost.replace(/\d+/g,"<span class='card_costnum'>$&</span>");
*breaks styling*card_cost=card_cost.replace(/\s/g,"");*breaks styling*
}

document.getElementById('output').innerHTML+="<div class='card'>"+"<span class='card_cost'>"+card_cost+"</span>";

CSS:

.card_name,.card_image,.card_cost,.card_type,.card_subtype,.card_rarity,.card_rules,.card_flavor,.card_strength,.card_num,.card_lower,.card_costnum
{
position:relative;
z-index:1;
}

.card_cost
{
display:inline-block;
float:right;
clear:right;
}

.card_costnum
{
position:relative;
display:inline-block;
text-align:center;
vertical-align:middle;
background-image:url("numsymbol_small.png");
background-repeat:no-repeat;
width:12px;
height:12px;
margin:1px;
top:-4px;
}

I don't understand - what is it you're trying to do? (I tried answering, but looking back, I'm not sure it's what you need anymore.) — Ry-
– Ry- ♦, Commented Apr 22, 2012 at 17:03
Use DOM manipulation to remove whitespace text nodes instead of regex. And don't do .innerHTML+=.... It's a terrible thing to do to your DOM. — user1106925
– user1106925, Commented Apr 22, 2012 at 17:05
If you tie to minimize your css you can also remove all new lines and " in the url, etc. have a look at codebeautifier.com — tbraun89
– tbraun89, Commented Apr 22, 2012 at 17:05
Whoever posted about positioning the space replacement before any other replacements that fixed my issue. — Event_Horizon
– Event_Horizon, Commented Apr 22, 2012 at 17:11

Ry- · Accepted Answer · 2012-04-22 17:00:33Z

3

card_cost = card_cost.replace(/\d+/g, "<span class='card_costnum'>$&</span>");
card_cost = card_cost.replace(/\s/g, "");

You're turning it into <spanclass='card_costnum'>, which is not valid, and which will break the rest of your HTML. Just reverse the replacements.

card_cost = card_cost.replace(/\s/g, "");
card_cost = card_cost.replace(/\d+/g, "<span class='card_costnum'>$&</span>");

answered Apr 22, 2012 at 17:00

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Replace spaces with Regex without replacing empty HTML tags

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related