私はこのような何かにスペースを置き換えたい

Question

空のHTMLタグを置き換えることなく、正規表現でスペースを置き換えます

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

が、私はそう使用しないとき：

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

を、それは私を台無しcss all upとオブジェクトの位置が絶対に変更されたように、互いの上に積み重ねられます。

どのように私のCSSやドキュメントの流れを壊さずにスペースを置き換えることができますか？

例コード：

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

Answer 1

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

あなたが有効ではありませんこれは、<spanclass='card_costnum'>にそれを回すしていて、これを中断しますあなたのHTMLの残りの部分。置換えを逆にするだけです。

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