Parsování textu – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Potřebuju naparsovat css stylopis. Mám tento kód, ve kterém nejdříve odstraním komentáře a pak parsuju, ale problém je že část kde chci vložit do pole arr1 a do pole arr2 stringy nefunguje to a nejede vůbec:

function parse(){
  var src = document.getElementById("css").value;
  var arr; 
  var arr1; 
  var arr2
  var lines = src.replace(/(?:^#|\/\/).*/mg,"").replace(/[\r|\n]/g,"").replace(/\/\*.*\*\/\s?/g,"").split("}");
  for ( var i = 0; i<lines.length; i++ )
    {    
    arr = lines[i].split("{")
    
    arr1.push(arr[0].trim())
    arr2.push(arr[1].trim())
    
    }   
  console.log(arr);
}

Jinak místo arr1 a arr2 by mělo být search a task:

var task {
  search: [],
  task: []
}

tato definice mi ale nefunguje a script nechce běžet kvůli chybě (žádnou chybu ale nevidím v Debuggeru takže nevím o jakou chybu se jedná). Chyby se mi ve Firefoxu vůbec nezobrazují.

Zkušební text:

/*
css rules
*/
 
body { color:black;}
div, p { color:blue; background-color:white; }
form, form p { width:500px; }

# non-greedy
// anything

1. Pro parsovani naprosto nutne potrebujes skutecny parser, ktery umi spravne resit uvozovky a v uvozovkach komentare ci jine veci.

2. // , # v css nepouzivam, takze nemuzu rici, zda je takovy zapis povoleny. Kazdopadne by se ti to mohlo pobit u odstranovani komentaru /**/ a //
# non-greedy (to nevim, co je)
#non-greedy ale takhle je to <div id="non-greedy">...

3. Parse je klicove slovo preddefinovane funkce.

4. konzola mi rve, ze neexistuje index 1, proc to asi dela? Zkusil jsi si to vyalernovat, co je ve ktere promenne nez to zarve? treba prazdny retezec se dost spatne splituje :)

<textarea id="css" rows=100, cols=30>
/*
css rules
*/
 
body { color:black;}
div, p { color:blue; background-color:white; }
form, form p { width:500px; }

# non-greedy
// anything
</textarea>

<script>
function xparse(){
  var src = document.getElementById("css").value;
  var arr = []; 
  var arr1 = []; 
  var arr2 = [];
  var lines = src
.replace(/(?:^#|\/\/).*/mg,"")
.replace(/[\r|\n]/g,"")
.replace(/\/\*.*\*\/\s?/g,"")
.split("}");
alert(lines)
  for ( var i = 0; i<lines.length; i++ )
    {    
if (lines[i]!=='')
{
    arr = lines[i].split("{")
    arr1.push(arr[0].trim())
    arr2.push(arr[1].trim())
}    
    }   
alert(arr1.join("\n"));
alert(arr2.join("\n"));
  console.log(arr);
}

xparse();
</script>

Dík za kód, ale řekl bych že už to mám hotové.

Zkušební text:

body, h1, h2, h3, h4, h5, div, p, ul, li

{
background-color: black; 
color: #f7fab0;
font-family: "Arial Black";
font-size: 20px;
line-height: 35px;
font-weight: bold; 
font-size: 28px;
padding-left: 0px;
padding-right:0px;
}

h1, h2, h3, h4, h5, div, p, ul, li, span, a
{
background-image: none;
}

Obrázky na pozadí a jiné složitosti netřeba přidávat.

var task = {
  search: [],
  task: [],
  css: []
};

function parse(src = null){
  if ( src === null ||
       ( typeof src === 'object' && src.type == 'click' ) // click event for debugging purposes
     ) 
    src = document.getElementById("css").value;

  var arr; 
  var lines = src.replace(/(?:^#|\/\/).*/mg,"").replace(/[\r|\n]/g,"").replace(/\/\*.*\*\/\s?/g,"").split("}");
  if (lines.length)
  for ( var n = 0; n<lines.length-1; n++ )
    {    
    var arr20 = [];
    var arr21 = [];
    var arr22 = [];
    task.task[n] = [];
    
    arr = lines[n].split("{");
    console.log(arr);

    if ( arr.length % 2 === 0 )
      {
      task.search.push(arr[0]);  // sem mohu vložit trim
      arr20.push(arr[1]); // push css block 
      }
    else
      { 
      break;
      }

    for ( var i = 0; i<arr20.length; i++ ){
      arr21 = arr20[i].split(";"); // push css style
      if ( !arr21.length )
        return false;
    }
    for ( i = 0; i<arr21.length; i++ )
      { 
      arr21[i] = arr21[i].trim(); 
      if ( arr21[i] === "") continue;
      arr22 = arr21[i].split(":");
      if ( arr22.length % 2 === 0 )
        {
        task.task[n].push( // push name, value 
            { name:arr22[0], value:arr22[1].trim() }
          );
        }
      else
        { 
        break;
        }
      }
    task.css[n] = {}
    for ( i = 0; i<task.task[n].length; i++ )
      {
      task.css[n][task.task[n][i].name] = 
        task.task[n][i].value;      
      }
    console.log(task);
    }
}

Funguje mi to bez problému.

arr.length % 2 === 0
? deleni je pomala operace. Nebylo by rychlejsi porovnat to zrovna s 2 ?
arr.length == 2

A tez si nejsem jisty, zda .split(";") neskonci errorem, pokud ve stringu neni strednik. Ale mozna ne.
 

Ne, tam se jedná o to zjistit jestli je tam sudý počet (páry tag : css styl). Jistě by stačilo porovnat první bit čísla - to teď zrovna nevím jak v JS udělat.

Pokud tam uživatel začne dávat neobvyklé věci tak to určitě skončí errorem, ale to uvidí že mu addon nejede.

#4 peter

arr.length % 2 === 0

je test, zda je číslo sudé, tedy 0, 2, 4, ...

arr.length == 2

je test, zda je číslo rovno dvěma. Významově zcela odlišné podmínky. Kromě toho je dělení celého čísla dvěma velmi rychlé. 

string.split(";")

neskončí errorem, pokud se v řetězci nenachází středník. Výsledkem bude seznam s jedním platným elementem.

Ale jeho stejne nezajima vic nez arr[0] a arr[1], takze nema vyznam pouzivat deleni %2.