bungkus konten google doc dengan div dan ubah menjadi file html

Saya mencoba mengubah file Google Docs menjadi file html. Saya memberikan tag html ke konten melalui google docs (h1, h2, p, dll) dan kemudian saya mengunduhnya sebagai file HTML dan berfungsi dengan baik.

Saya punya satu masalah - Saya ingin membungkus konten tertentu di file google doc saya dengan div, misalnya div untuk setiap bab. Saat ini file tersebut hanyalah daftar tag html (h1, p, h2 dll) dan saya memerlukannya agar lebih benar secara hierarki.

Apakah ada cara untuk melakukan itu? Saya mencoba menggunakan hentian halaman dan opsi serupa lainnya tetapi itu hanya menambahkan elemen lain ke daftar dan tidak membungkus konten tertentu dalam div seperti yang saya inginkan. Solusi javascript juga bagus.

Akan sangat menghargai bantuan apa pun, Terima kasih! Nir

nirshh5 01.03.2021 sumber

Jawaban (1)

arrow_upward
1
arrow_downward

Anda dapat mencoba pendekatan ini di Google Apps Script. Ini bukanlah satu-satunya solusi. Ini hanyalah kode sederhana yang dapat Anda coba dari banyak kemungkinan solusi yang tersedia. Jangan ragu untuk memodifikasi jika diperlukan tergantung pada kasus penggunaan Anda.

Kode:

function myFunction() {
  var doc = DocumentApp.getActiveDocument();
  var content = doc.getBody();
  var numChildren = content.getNumChildren();
  var output = [];
  // Send email to this address
  var sendTo = "[email protected]"; 

  output.push("<html><body>");
  for(var i=0; i < numChildren; i++){
    var item = content.getChild(i).asText();
    var text = item.getText();

    // Assuming that a chapter always starts in bold headers, we start the div there
    if(item.isBold()) {
      // Add opening div tags on every start of header, see doc format below
      output.push('<div>');
      output.push('<h1>' + text + '</h1>');
    }
    // If not bold, then that element is assumed as the content of the chapter
    else if (text){
      output.push('<p>' + text + '</p>');
    }
  }
  output.push("</body></html>");

  // Get all indices where div is (except the first) and reverse
  var indexes = getAllIndexes(output, "<div>");
  // Per div found, insert closing div tag </div> before it
  indexes.forEach(function(index){
    output.splice(index, 0, "</div>");
  });

  // Join output array and treat it as html
  var html = Utilities.newBlob(output.join(""), 'text/html', 'doc_to_html.html');
  // Send to your email (modify email above if needed) the converted file with div tags
  MailApp.sendEmail(sendTo, "Attached html-converted document", "file is attached below", {name: 'doc-to-html', attachments: [html], noReply: true});
}

function getAllIndexes(arr, val) {
    var indexes = [], i = -1;
    while ((i = arr.indexOf(val, i+1)) != -1){
        indexes.push(i);
    }
    // Remove the first index (we don't need to add closing divs before the first div)
    indexes.shift();
    // Return reversed indices since we will add from the end since we are inserting closing div tags (</div>)
    // Inserting from the start will change the indices of those succeeding opening div tags (<div>) we need to close
    return indexes.reverse();
}

Surel:

Lampiran HTML:

Catatan:

Ini diasumsikan bahwa per bab, ada satu header di awal (kami memasukkan <div> di sini), dan paragraf di bawahnya. Tag div penutup </divs> disisipkan setiap sebelum tag <div> berikutnya ditemukan.

NaziA 01.03.2021