使用各種<span>標籤

我試圖使用JavaScript與風格的文字段落來替換字符的JavaScript更換字符。如果我替換一個字符用一種風格，它工作正常，但是當我嘗試更換3種不同風格的3個不同的字符段打印3次，每次只有1作風轉變。我想讓這三種款式在1款中生效。以下是我正在使用的代碼。謝謝。使用各種<span>標籤

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function myFunction(){ 
var pText=document.getElementById("alteredText").innerHTML; 
var eSpan=pText.replace(/e/g,"<span style='position:relative;color:red;top:.05em;'>e</span>"); 
var tSpan=pText.replace(/t/g,"<span style='position:relative;color:blue;top:-.05em;'>t</span>"); 
var sSpan=pText.replace(/s/g,"<span style='color:green;'>s</span>"); 
var n = eSpan.concat(tSpan,sSpan); 
document.getElementById("alteredText").innerHTML=n; 
} 
</script> 
</head> 
<body onLoad="myFunction()"> 
<p id="alteredText"> 
The quick brown fox jumped over the lazy sleeping dog. 
The slow shiny robot chased the quick brown fox. 
The lazy sleeping dog awoke and barked at the slow shiny robot. 
</p> 
</body> 
</html>

來源

2012-09-21 Dylan C

替代通常像這樣的鏈接（例如：'pText.replace（）代替（）代替（）'）不過這不會工作，新增文本將匹配't'和's'，所以你需要使用正則表達式更好，功能更多的替代品，檢查被匹配什麼字符，並適當地將其替換。 – zzzzBov

試試這個：

var first = pText.replace(/e/g,"<span style='position:relative;color:red;top:.05em;'>e</span>"); 
var second = first.replace(/t/g,"<span style='position:relative;color:blue;top:-.05em;'>t</span>"); 
var final = second.replace(/s/g,"<span style='color:green;'>s</span>"); 
document.getElementById("alteredText").innerHTML=final;

見我做什麼？您正在創建三個字符串，每個字符串都有一個替代字符在這裏，我正在做第二個替換字符串中已經包含第一個。在最後一次更換後，我把它放在元素中。

來源

2012-09-21 18:50:27

你的'在「跨」是要被替換過 – cbaby

這主要是非常有益的。這是正確的道路，但cbaby是正確的。在「S」的「跨度」打開HTML頁面到代碼和段落的瘋狂，程式化的版本。：^）非常感謝。這讓我走上了正確的道路。 –

謝謝@cbaby！我沒有閱讀正則表達式。 –

var pText=document.getElementById("alteredText").innerHTML; 
var t = pText.replace(/e/g,"@[email protected]");  
t = t.replace(/t/g,"@[email protected]");   
t = t.replace(/s/g,"@[email protected]");   
t = t.replace(/@[email protected]/g,"<span style='position:relative;color:red;top:.05em;'>e</span>"); 
t = t.replace(/@[email protected]/g,"<span style='position:relative;color:blue;top:-.05em;'>t</span>"); 
t = t.replace(/@[email protected]/g,"<span style='color:green;'>s</span>"); 
document.getElementById("alteredText").innerHTML=t;

來源

2012-09-21 18:54:30 cbaby

這很好。但是，我還沒有進展到足以理解這裏發生的一切。在「T = .... T = ....」約定不熟悉我，我不知道「@ T @」的東西做什麼。不過，我仍然感謝幫助。這是我第一次在Stackoverflow上提問。你很善良的回答這麼快，徹底。謝謝。 –

一個快速&骯髒的解決方案：

function myFunction(){ 
    var pText=document.getElementById("alteredText").innerHTML; 
    var eSpan=pText.replace(/e/g,"<SPAN STYLE='POSITION:RELATIVE;COLOR:RED;TOP:.05EM;'>e</SPAN>"); // CAPS are needed so no match is found in the next replace 
    var tSpan=eSpan.replace(/t/g,"<SPAN STYLE='POSITION:RELATIVE;COLOR:BLUE;TOP:-.05EM;'>t</SPAN>"); 
    var sSpan=tSpan.replace(/s/g,"<SPAN STYLE='COLOR:GREEN;'>s</SPAN>"); 
    // var n = eSpan.concat(tSpan,sSpan); //<-- this creates the three copies of the paragraph. you don't need this. 
    document.getElementById("alteredText").innerHTML=sSpan; 
}

看到http://jsfiddle.net/DUN4C/

來源

2012-09-21 18:58:27 balafi

不錯。謝謝您的幫助。這是一種爲我的代碼組合變量的功能方式。「CAPS是必要的」部分是一個很好的接觸。這對你來說可能是一個「快速和骯髒的解決方案」，但對於像我這樣的新手來說，它似乎是非常好的東西。我很感激。 –

使用各種<span>標籤

回答

相關問題