JavaScript和CSS工作在Firefox，但不工作的IE

您好我有這樣的代碼，其工作fitrefox但IE不工作的IEJavaScript和CSS工作在Firefox，但不工作的IE

缺少最後charector

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>wrapped</title> 
     <script type="text/javascript" language="javascript"> 
     function set_padd(){ 
     var tt = document.getElementById("span_padding").innerHTML;  
     var txt = new Array();  
    txt = tt.split(" ");     
     var atxt = ''; 
     var f_txt = ''; 
     var wrd_pr_linr = 4;  
     var cnt = 1;  
     for(var i = 0; i < txt.length; i++){ 
      if(txt[i].length > 0){   
      txt[i] = txt[i].replace(' ',''); 
      if(cnt < wrd_pr_linr){ 
      if(txt[i].length > 0){ 
      atxt += ' '+txt[i].replace(' ',''); 
      cnt++;   
      } 
      }else{ 
      f_txt += '<a class="padd_txt" >'+atxt+'</a><br />'; 
      atxt = ''; 
      cnt = 1; 
      } 
      } 
     } 
     document.getElementById("span_padding").innerHTML = f_txt; 
     } 
     </script> 
     <style type="text/css"> 
     .padd_txt{padding:7px;background:#009;color:#FFF;line-height:26px;font-size:14px;} 

    body{font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:24px; line-height:1.2em;} 
    span{background-color: #009; width:200px; color: #FFF;" class="blocktext;} 



     </style> 
</head> 
<body onload="set_padd();"> 
    <div style="width: 350px;"> 
     <p> 
     <span id="span_padding"> 
      This is what I want to 
     happen where one 
     long string is wrapped 
     and the text has this 
     highlight color behind 
     it. 
     </span> 
    </div> 
</body> 
</html>

出來放在Firefox是

這是
我想
發生，其中一個
字符串被包裹
和文本
這個亮點
在它後面。

和輸出在IE

這是
希望發生
一個長字符串
包裹和
有這個亮點

缺少最後兩個詞

來源

2010-04-21 Nirbhay saini

它看起來不能在任何瀏覽器上正常工作，單詞從兩個輸出中都丟失。 – 2010-04-21 10:44:28

你應該嘗試讓你的代碼更具可讀性，因此，人工智能不必猜測你想要在每個變量中存儲什麼 – fmsf 2010-04-21 10:49:25

你使用的是什麼版本的IE？ – 2010-04-21 10:54:45

IE和Firefox的結果是不同的，因爲IE的習慣是在標籤周圍扔掉空白。但是，你的功能在兩個瀏覽器上都被打破了，因爲它拋棄了每一行的最後一個詞，並且有可能在整個最後一行沒有輸出。

似乎有點費力。如何使用正則表達式來每組最多四個詞匹配：

function set_padd() { 
    var span= document.getElementById('span_padding'); 
    var text= span.firstChild.data; 
    span.innerHTML= ''; 
    var lines= text.match(/\S+(\s+\S+){0,3}/g); 

    for (var i= 0; i<lines.length; i++) { 
     var el= document.createElement('a'); 
     el.className= 'padd_txt'; 
     el.appendChild(document.createTextNode(lines[i])); 
     span.appendChild(el); 
     span.appendChild(document.createElement('br')); 
    } 
}

來源

2010-04-21 11:24:40 bobince

+1，我希望你不介意我借用了大部分正則表達式來改進我的答案的最後部分:-) – 2010-04-21 11:40:08

有幾個明顯的問題與您的代碼：

在你i，其中cnt < wrd_pr_linr是假的，你重置計數和包圍當前atxt的範圍，但您對txt[i]沒有做任何處理，所以在下一次轉身時增量會增加，因此它被錯過了。您可以通過在cnt++;之後添加i--;來解決此問題。
如果循環終止，而cnt < wrd_pr_linr爲true，則不會執行創建DOM字符串的else語句，而忽略atxt的值。當您的if語句即將終止時，您需要運行相同的代碼塊。

如果是我，我會尋找到一個更整潔，更簡單的，基於正則表達式的解決方案：

function set_padd(){ 
    var f_txt; 
    var tt = document.getElementById("span_padding").innerHTML; 

    // replace every third space with "{!BREAK!}"  
    tt = tt.replace(/(.*?\s+.*?\s+.*?)\s+/g, "$1{!BREAK!}"); 

    // Splitting on that string creates an array with 3 words in each index 
    tArr = tt.split("{!BREAK!}"); 

    // Join the array again with the HTML you need between each index 
    f_txt = tArr.join('</a><br/><a class="padd_txt">'); 

    // Wrap the text with the start tag and the end tag 
    f_txt = '<a class="padd_txt">' + f_txt + '</a>'; 

    // Viola! 
    document.getElementById("span_padding").innerHTML = f_txt; 
}

取出意見，交換正則表達式類似bobince's的東西，你可以得到它看起來非常小：

function set_padd(){ 
    var tt = document.getElementById("span_padding").innerHTML; 
    var f_txt = '<a class="padd_txt">' 
       + tt.match(/\S+(\s+\S+){0,2}/g) 
        .join('</a><br/><a class="padd_txt">') 
       + '</a>'; 

    document.getElementById("span_padding").innerHTML = f_txt; 
}

來源

2010-04-21 11:26:43

JavaScript和CSS工作在Firefox，但不工作的IE

回答

相關問題