Tukar html kepada javascript

HTML dan JavaScript ialah dua teknologi yang sangat penting dalam pembangunan web. HTML bertanggungjawab untuk struktur dan kandungan halaman web, manakala JavaScript digunakan untuk meningkatkan interaktiviti dan dinamik halaman web. Dalam pembangunan sebenar, kita selalunya perlu menukar kod HTML kepada kod JavaScript supaya kita boleh menggunakannya dalam aplikasi. Di bawah, saya akan memperkenalkan pelbagai kaedah untuk menukar kod HTML kepada kod JavaScript.

1. Gunakan innerHTML

innerHTML ialah atribut yang sangat praktikal dalam JavaScript, yang boleh memasukkan kod HTML ke dalam elemen. Sebagai contoh, kita boleh menentukan elemen HTML dalam halaman web dan menetapkan atribut HTML dalamannya kepada kod HTML yang perlu ditukar. Kemudian, gunakan JavaScript untuk mendapatkan nilai atribut innerHTML elemen untuk mendapatkan kod JavaScript yang sepadan.

Sebagai contoh, kita perlu menukar kod HTML berikut kepada kod JavaScript:

<div>
  <h1>这是一个标题</h1>
  <p>这是一段文字</p>
</div>

Kita boleh mentakrifkan elemen dalam HTML dan menetapkan atribut HTML dalamannya kepada kod HTML yang perlu ditukar, seperti berikut :

<div id="myHtml">
  <h1>这是一个标题</h1>
  <p>这是一段文字</p>
</div>

Kemudian, dapatkan nilai atribut innerHTML bagi elemen dalam JavaScript, seperti berikut:

var html = document.getElementById("myHtml").innerHTML;

Pada masa ini, kandungan dalam html pembolehubah ialah kod JavaScript yang ditukar.

2. Gunakan ungkapan biasa

Dalam JavaScript, kita boleh menggunakan fungsi pemadanan ungkapan biasa untuk mengekstrak pelbagai teg, nilai atribut, dsb. dalam kod HTML, dan kemudian menggunakannya mengikut khusus Format disambungkan ke dalam kod JavaScript.

Sebagai contoh, kita perlu menukar kod HTML berikut kepada kod JavaScript:

<div>
  <h1 class="title">这是一个标题</h1>
  <p>这是一段文字</p>
</div>

Kita boleh menggunakan ungkapan biasa untuk mengekstrak teg, nilai atribut, dsb., seperti berikut:

var html = '<div><h1 class="title">这是一个标题</h1><p>这是一段文字</p></div>';
var tagsRegex = /(<(w+)>)/ig;
var attributesRegex = /([w-]+="[^"]*")/ig;

// 提取标签
html = html.replace(tagsRegex, function(match, p1) {
  return ''' + p1 + '',';  
});

// 提取属性值
html = html.replace(attributesRegex, function(match, p1) {
  return ''' + p1 + '',';  
});

console.log('createElement(' + html + ');');

Dalam kod di atas, kami menggunakan dua ungkapan biasa untuk mengekstrak teg dan nilai atribut. Kemudian, kami menggunakan kaedah ganti rentetan untuk menggantikan kandungan yang dipadankan ke dalam format yang kami perlukan.

3. Gunakan rentetan templat

Dalam ES6, kita boleh menggunakan rentetan templat untuk menyambung rentetan. Rentetan templat menyokong interpolasi pembolehubah, teks berbilang baris dan fungsi lain, yang sangat praktikal.

Sebagai contoh, kita perlu menukar kod HTML berikut kepada kod JavaScript:

<div>
  <h1 class="title">这是一个标题</h1>
  <p>这是一段文字</p>
</div>

Kita boleh terus menggunakan rentetan templat untuk menyambungkannya ke dalam kod JavaScript yang sepadan, seperti berikut:

const html = `
  <div>
    <h1 class="title">这是一个标题</h1>
    <p>这是一段文字</p>
  </div>`;

const js = `var div = document.createElement('div');
div.innerHTML = '${html}';
document.body.appendChild(div);`;

Dalam kod di atas, kami menggunakan backtick (`) untuk menentukan rentetan templat. Kemudian, kita boleh menggunakan ${} untuk memasukkan pembolehubah dan menggabungkan kod JavaScript yang kita perlukan.

Ringkasnya, HTML dan JavaScript adalah teknologi yang sangat penting dalam pembangunan web Menguasai kaedah menukar HTML kepada kod JavaScript boleh membantu kami membangunkan aplikasi dengan lebih mudah. Di atas adalah beberapa kaedah untuk menukar kod HTML kepada kod JavaScript Anda boleh memilih satu atau lebih daripadanya mengikut situasi sebenar anda.

Atas ialah kandungan terperinci Tukar html kepada javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!