Question

嗨，我有这个代码在fitrefox上工作，但没有在IE上工作，错过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>

out on firefox是

这是
  我想要   发生在哪里   字符串被包裹   和文字
  这个亮点
  背后。

并在IE上输出

这就是什么   想要发生   一根长串
  包裹和   有这个亮点

缺少最后两个字

Answer 1

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'));
    }
}

Answer 2

您的代码有几个明显的问题：

在i，其中cnt < wrd_pr_linr为假，您正在重置计数并在当前atxt周围包裹一个范围，但您没有对{{1}做任何事情因为在下一个转弯时增量会增加，所以它会丢失。您可以在txt[i]之后添加i--;来解决此问题。
如果您的循环在cnt++;为真时终止，则不会执行创建DOM字符串的else语句，而忽略cnt < wrd_pr_linr的值。当if语句即将终止时，您需要运行相同的代码块。

如果是我，我会研究一个更简洁，更简单，基于正则表达式的解决方案：

atxt

取出评论，将正则表达式换成bobince's类似的东西，你可以让它看起来很小：

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;  
}

javascript和css在Firefox上工作，但没有在IE上工作

2 个答案: