2

JavaScriptを使用して、段落内の文字をスタイル付き文字に置き換えようとしています。1つの文字を1つのスタイルに置き換えると正常に機能しますが、3つの異なる文字を3つの異なるスタイルに置き換えようとすると、段落が3回印刷され、それぞれ1つのスタイルが変更されます。3つのスタイルを1つの段落で有効にしたい。以下は私が使用しているコードです。ありがとうございました。

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

3 に答える 3

2 
var pText=document.getElementById("alteredText").innerHTML;  
var t = pText.replace(/e/g,"@e@");     
t = t.replace(/t/g,"@t@");        
t = t.replace(/s/g,"@s@");        
t = t.replace(/@e@/g,"<span style='position:relative;color:red;top:.05em;'>e</span>");  
t = t.replace(/@t@/g,"<span style='position:relative;color:blue;top:-.05em;'>t</span>");  
t = t.replace(/@s@/g,"<span style='color:green;'>s</span>");  
document.getElementById("alteredText").innerHTML=t;
于 2012-09-21T18:54:30.583 に答える
0

これを試して：

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;

私がしたことを見ますか？3 つの文字列を作成し、それぞれに 1 つの置換を加えました。ここでは、最初の文字列を既に含む文字列で 2 番目の置換を行っています。最後の交換後、エレメントに入れました。

于 2012-09-21T18:50:27.833 に答える
0

1 つのクイック & ダーティ ソリューション:

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-21T18:58:27.967 に答える