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

回答

相关问题