Hej. Jag håller på att labbar lite bara för att lära mig. Undrar nu varför följande funktion returnerar...
Ersätt*alla*mellanslag*med*något*annat*
...istället för...
Ersätt*****alla****mellanslag*med*något*annat*
<div id="x1">
Ersätt alla mellanslag med något annat
</div>
<script type="text/javascript">
funReplace(document.getElementById("x1").innerHTML)
function funReplace(str){
str = str.replace(/ /gi, "*");
alert(str)
document.getElementById("x1").innerHTML = str
}
</script>
Kan man skriva en funktion som hittar alla mellanslag eller filtreras de bort av webläsaren/webservern... hmmm... i view source finns de ju kvar?!
:stud
zzzimonMedlem sedan jan. 200817 inlägg Hej
Jag tror det är så att attributet "innerHTML"
konstrueras utifrån det inre DOM-objektet för
div-taggen. Och det inre DOM-objektet för
div-taggen har ju inte kvar några extra
mellanslag. InnerHTML är alltså inte original-
sourcekoden utan den kod som genereras
utifrån det inre DOM-objektet.
Jag tror detta eftersom när jag själv påverkat
attributet innerHTML och glömt sätta några
avslutande taggar, så när jag sedan läser av
innerHTML så har den satt dit dessa taggar
automatiskt, som om den läst av ett inre
objekt.
Undrar om man kan lösa det genom att använda
<pre> ... </pre> eller <code> ... </code> eller
nån tagg som bevarar mellanslagen.
/Simon
Hej zzzlepy simon ;)
Du verkar ha helt rätt i din teori. Lägger jag dessutom till <pre> enligt:
<pre>
<div id="x1">
Ersätt alla mellanslag med något annat
</div>
</pre>
...så fungerar det i ett naffs.
Följdfråga. Är det någon som vet om man kan ange att en specifik div ska ha PRE-egenskapen?
RED: white-space:pre; verkar ha den funktionen men jag får det inte att fungera... hmm...
Hmmm... White-space:pre; fungerar bara i IE om man använder doctype strikt. Kan man komma runt det på något sätt. Jag har en del sidor som använder...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
... och det skulle vara underbart om white-space:pre fungerade även där. ??!
zzzimonMedlem sedan jan. 200817 inlägg Hej :-)
Jag satt och testade lite för skoj skull.
Jag lyckas få det att fungera i Internet Explorer om
jag använder följande kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<script type="text/javascript">
function funReplace(str){
str = str.replace(/ /gi, "*");
alert(str);
document.getElementById("x1").innerHTML = str ;
}
</script>
</head>
<body onLoad="setTimeout('funReplace(document.getElementById(\'x1\').innerHTML)',0)">
<div id="x1" style="white-space:pre">
Ersätt alla mellanslag med något annat
</div>
</body>
</html>
Jag var då tvungen att även specificera "...loose.dtd" i doctype-
taggen (vad det nu har för betydelse). Samt så konstruerade
jag om koden lite, så att scriptet hamnade i head-taggarna,
och så anropar jag det först när sidan laddat klart med onLoad.
Jag var dessutom tvungen att sätta anropet i en setTimeout
av någon anledning, kanske för att få en viss fördröjning så
att webbläsaren hinner göra något
Jag vet inte om det hjälper dig eller inte..
mvh Simon
RED: webforum verkar lägga till mellanrum mellan "inner" och "HTML" i onLoad satsen av någon anledning. Man får sätta ihop det igen om koden ska funka..
function addEvent(o, e, f) {
return o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on' + e, f);
}
function funReplace(str){
str = str.replace(/\s/gi, "*");
document.getElementById("x1").innerHTML = str;
}
addEvent(window, 'load', function(){
funReplace(document.getElementById("x1").innerHTML);
});
fungera för mig.
<div id="x1" style="white-space:pre;">
Ersätt alla mellanslag med något annat
</div>
zcorpanMedlem sedan dec. 20042 245 inlägg Att IE kollapsar mellanslag om white-space inte är 'pre' är en bugg i IE. CSS borde inte ändra på trädet.
Ok. Tack för hjälpen, nu har jag kommit vidare... :)
Spånar vidare och inser att .innerHTML verkar tolkas olika i de olika webläsarna.
<pre id="showSourceCode">
<% IF session("login_is_ok") = "yes" then %>
<table border="0" cellpadding=10 width="300" valign="top" align="center">
<td valign="top" align="center">
<a href="innebandy/page_design.asp"><img border=0 src="/iar/ico_bil_bandy.png"></a><br>
<font face=arial size=2><a href="innebandy/page_design.asp">INNEBANDY</a></font>
</td>
<td valign="top" align="center" style="border:1px solid red;">
<a href="http://mattiasnordin.net/iar/booking/bookingStart.asp?rSelectAccountId=1"><img border=0 src="/iar/ico_bil_booking.png"></a><br>
<font face=arial size=2><a href="http://mattiasnordin.net/iar/booking/bookingStart.asp?rSelectAccountId=1">BOOKING</a></font>
</td>
</table>
<p>
<center><font size=1 face=arial>Close the window to log off...</font></center>
<p>
<% else %>
</pre>
<script type="text/javascript">
funReplace(document.getElementById("showSourceCode").innerHTML)
function funReplace(str){
// ERSÄTT HTML START TAGGEN
str = str.replace(/</gi, "<");
// ERSÄTT HTML SLUT TAGGEN
str = str.replace(/>/gi, ">");
// ERSÄTT VANLIG TAB
str = str.replace(/\t/gi, " ");
// ERSÄTT RADBRYTNINGAR
str = str.replace(/\n/gi, "<li> ");
// ERSÄTT SPACE
str = str.replace(/ /gi, " ");
// HIGHLIGHT ONE ROW
str = str.replace(/_.hl_/gi, "<span style=background-color:yellow>");
str = str.replace(/_hl._/gi, "</span>");
// REPLACE <% and %>
str = str.replace(/<\045/gi, "<span style=background-color:yellow>");
str = str.replace(/\045>/gi, "</span>");
//alert(str);
str = "<ol><li>" + str +"</ol>"
document.getElementById("showSourceCode").innerHTML = str ;
}
</script>
Ger väntad (nästan) effekt i Mozilla men ser helt annourlunda ut i IE. Antar att detta är en begränsning mellan webläsarna eller borde det gå att få det att se likadant ut i bägge.
Jag blev lite nyfiken på hur saker och ting fungerar när jag snubblade över det för övrigt mycket trevliga skriptet på:
http://softwaremaniacs.org/soft/highlight/
TroxyMedlem sedan mars 20041 505 inlägg
Mattias Nordin skrev:
Spånar vidare och inser att .innerHTML verkar tolkas olika i de olika webläsarna.
Det är för att .innerHTML inte finns i någon specifikation, vilket är lätt att glömma.
zcorpanMedlem sedan dec. 20042 245 inlägg
Troxy skrev:
Det är för att .innerHTML inte finns i någon specifikation, vilket är lätt att glömma.
Räknas HTML5 som en specifikation? ;)
Är det någon som vet om internet explorer version 8 kommer att hantera .innerHTML på samma sätt som firefox?
Hmmm, nu missuppfattade jag vad du ville, så jag gjorde ett skript som inte använder innerHTML för att skriva ut koden. (Däremot måste du ju självklart hämta koden på ett eller annat sätt) Jag kan lika gärna posta koden.
I nuvarande skick kan den bara applicera CSS på en hel rad i taget inte på individuella ord, men det går att lägga till.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
</head>
<body>
<style type="text/css">
.prestyle{
white-space:pre;
font-family: courier new;
}
</style>
<script type="text/javascript">
function $(n){
if ('object' == typeof n)
return n;
else
return document.getElementById(n);
}
function dohighlight(targetelement, code){
var targetol = document.createElement("ol");
var codearray = code.split("\n");
for (var i=0; i<codearray.length; i++){
var coderow = document.createElement("li"),
str = codearray[i];
// ERSÄTT HTML START TAGGEN
//str = str.replace(/</gi, "<");
var textElement = document.createTextNode(str);
coderow.className = "prestyle";
coderow.appendChild(textElement);
targetol.appendChild(coderow);
}
targetelement.appendChild(targetol);
}
function addEvent(o, e, f) {
return o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on' + e, f);
}
addEvent(window, 'load', function(){
dohighlight($("targetdiv"), $("thecode").value);
});
thecode
</script>
<textarea id="thecode">
<pre id="showSourceCode">
<% IF session("login_is_ok") = "yes" then %>
<table border="0" cellpadding=10 width="300" valign="top" align="center">
<td valign="top" align="center">
<a href="innebandy/page_design.asp"><img border=0 src="/iar/ico_bil_bandy.png"></a><br>
<font face=arial size=2><a href="innebandy/page_design.asp">INNEBANDY</a></font>
</td>
<td valign="top" align="center" style="border:1px solid red;">
<a href="http://mattiasnordin.net/iar/booking/bookingStart.asp?rSelectAccountId=1"><img border=0 src="/iar/ico_bil_booking.png"></a><br>
<font face=arial size=2><a href="http://mattiasnordin.net/iar/booking/bookingStart.asp?rSelectAccountId=1">BOOKING</a></font>
</td>
</table>
<p>
<center><font size=1 face=arial>Close the window to log off...</font></center>
<p>
<% else %>
</pre>
<script type="text/javascript">
funReplace(document.getElementById("showSourceCode").innerHTML)
function funReplace(str){
// ERSÄTT HTML START TAGGEN
str = str.replace(/</gi, "<");
// ERSÄTT HTML SLUT TAGGEN
str = str.replace(/>/gi, ">");
// ERSÄTT VANLIG TAB
str = str.replace(/\t/gi, " ");
// ERSÄTT RADBRYTNINGAR
str = str.replace(/\n/gi, "<li> ");
// ERSÄTT SPACE
str = str.replace(/ /gi, " ");
// HIGHLIGHT ONE ROW
str = str.replace(/_.hl_/gi, "<span style=background-color:yellow>");
str = str.replace(/_hl._/gi, "</span>");
// REPLACE <% and %>
str = str.replace(/<\045/gi, "<span style=background-color:yellow>");
str = str.replace(/\045>/gi, "</span>");
//alert(str);
str = "<ol><li>" + str +"</ol>"
document.getElementById("showSourceCode").innerHTML = str ;
}
</script>
</textarea>
<div id="targetdiv">
</div>
</body>
</html>
zcorpan skrev:
Räknas HTML5 som en specifikation? ;)
Jag kanske bara har fått för mig detta, men ska inte HTML5 fortfarande ses som en specifikation för framtiden?
Dessutom så är problemet med just innerHTML att att det från början är en IE-standard, så de är nog motvilliga att anpassa sig till någon annan spec än den de hade från början. Dessutom kan man kanske inte klandra IE. Den returnerar ju elementet som det ser ut i IE's DOM-träd. Det är isf DOM-trädet det är fel på, inte innerHTML-funktionen som sådan.
