다양한 <span> 태그를 사용하여 자바 스크립트로 문자 바꾸기

자바 스크립트를 사용하여 단락의 문자를 스타일이 적용된 문자로 대체하려고합니다. 한 문자를 하나의 스타일로 바꾸면 제대로 작동하지만 3 개의 다른 문자를 3 개의 다른 스타일로 대체하려고하면 단락이 3 번 인쇄되고 각각은 단 하나의 스타일 만 변경됩니다. 나는 3 개의 작풍이 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;

내가 무슨 짓을했는지 참조하십시오? 당신은 하나의 교체로 각각 3 개의 문자열을 생성하고있었습니다. 여기에 이미 첫 번째 문자열이 들어있는 문자열에서 두 번째 대체 문자열을 사용하고 있습니다. 마지막으로 교체 한 후에 요소에 넣습니다.

출처

2012-09-21 18:50:27

'span'의 's'도 교체 될 것입니다. – cbaby

이것은 대단히 도움이되었습니다. 이것은 올바른 경로이지만 cbaby가 옳았습니다. 'span'의 '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> 태그를 사용하여 자바 스크립트로 문자 바꾸기

답변

관련 문제