JavaScript и CSS работают на Firefox, но не работают на IE - PullRequest
Новая
       11

JavaScript и CSS работают на Firefox, но не работают на IE

1 голос
/ 21 апреля 2010

Привет, у меня есть этот код, который работает на fitrefox, но не работает на IE, пропустив последний редактор в IE 

<!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

Это то, что
хочу случиться
одна длинная строка
завернутый и
имеет этот основной момент

пропущено последние два слова

Ответы [ 2 ]

1 голос
/ 21 апреля 2010

Результаты в 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'));
    }
}
0 голосов
/ 21 апреля 2010

Есть несколько очевидных проблем с вашим кодом:

  • В вашем i, где cnt < wrd_pr_linr равно false, вы сбрасываете счетчик и оборачиваете промежуток вокруг текущего atxt, но ничего не делаете с txt[i], поэтому он пропущен как приращение увеличивается на следующем обороте. Вы можете исправить это, добавив i--; после cnt++;.
  • Если ваш цикл завершается, а cnt < wrd_pr_linr имеет значение true, ваш оператор else, который создает строку DOM, не будет выполнен, а значение 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;  
}
...