替換正則表達式的空間，而無需更換空的HTML標籤

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

但是當我這樣做使用：

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

它攪亂我的css全部結束，對象堆疊在一起，就像它們的位置變成絕對一樣。

如何在不破壞我的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; 
}

來源

2012-04-22 Event_Horizon

我不明白 - 你在做什麼？（我試着回答，但回頭看，我不確定這是你的需要了。） – Ryan 2012-04-22 17:03:49

使用DOM操作刪除空白文本節點而不是正則表達式。並且不要做'.innerHTML + = ...'。對你的DOM做一件很糟糕的事情。 – 2012-04-22 17:05:11

如果你把你的css最小化，你也可以刪除所有的新行和'''在url等'看看http://www.codebeautifier.com/ – tbraun89 2012-04-22 17:05:40

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

來源

2012-04-22 17:00:33 Ryan

這解決了我的問題，謝謝。 – 2012-04-22 17:15:16

替換正則表達式的空間，而無需更換空的HTML標籤

回答

相關問題