使用各种<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>标签

回答

相关问题