Bagaimanakah Saya Boleh Menghuraikan CSS dengan Cekap dalam JavaScript?

Menghuraikan CSS dalam JavaScript / jQuery

Bolehkah saya Menggunakan Perpustakaan untuk Menghuraikan CSS?

Untuk menghuraikan CSS dengan cekap dalam JavaScript, pertimbangkan untuk menggunakan perpustakaan daripada membina logik penghuraian anda sendiri. Sebagai contoh, anda boleh menggunakan perpustakaan seperti "parseCSS" atau "cssParser" jQuery untuk memudahkan proses penghuraian.

Kaedah Alternatif untuk Membahagikan Gaya

Apabila menghadapi sifat CSS yang kompleks seperti "latar belakang: url(data:image/png;base64, ....);", pendekatan semasa anda untuk membelah menggunakan ";" menjadi tidak boleh dipercayai. Untuk mengatasinya, anda boleh menggunakan Ungkapan Biasa (RegEx) untuk mengasingkan pasangan nilai harta:

var regEx = /([^:]+):([^;]+);?/g;

RegEx ini menangkap mana-mana pasangan nilai harta yang dipisahkan dengan titik bertindih dan diikuti dengan koma bertitik pilihan.

Contoh Kod JavaScript

Di bawah ialah pelaksanaan yang dipertingkatkan penghurai CSS:

function parseCSS(css) {
  css = removeComments(css);
  var rules = {};
  css.replace(/([^:]+):([^;]+);?/g, function(m, prop, val) {
    rules[prop.trim()] = val.trim();
  });
  return rules;
}

function removeComments(css) {
  return css.replace(/\/\*(\r|\n|.)*\*\//g, "");
}

Menggunakan CSSOM untuk Penghuraian

Satu lagi kaedah yang sangat cekap untuk menghuraikan CSS melibatkan memanfaatkan CSSOM terbina dalam penyemak imbas:

function rulesForCssText(styleContent) {
  var doc = document.implementation.createHTMLDocument("");
  var styleElement = document.createElement("style");

  styleElement.textContent = styleContent;
  doc.body.appendChild(styleElement);

  return styleElement.sheet.cssRules;
}

Pendekatan ini menggunakan keupayaan penghuraian CSS pelayar untuk mengekstrak koleksi CSSRule objek, setiap satu sepadan dengan peraturan CSS, yang boleh diperiksa lebih lanjut untuk mendapatkan maklumat terperinci.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghuraikan CSS dengan Cekap dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!