簡體   English   中英

轉換無序列表 (<ul> ) 轉換為 HTML 格式的表格 (<div id="text_translate"><p> 我以前一直在尋求一種解決方案,允許我將無序列表轉換為格式化的 HTML 表。</p><p> 當時,一位好心的用戶提出了一個解決方案,我在下面附上了。</p><p> 該解決方案將無序列表轉變為 Google 表格中的常規表格,其中不同的值被划分到它們自己的單元格中。 相反,我希望將無序列表轉換為僅放在一個單元格中的格式化 html 表列表。</p><p> 如果可能的話,除此之外,我希望能夠將數百個無序列表放入腳本中,然后將其轉換為各自的 HTML 格式的表格。</p><p> 請參閱下面我從另一個用戶那里獲得的先前解決方案。</p><p> 希望這一切都有意義。</p><p> <strong>編輯:</strong>我還在這篇文章的最底部添加了輸入和首選 output。</p><pre> In your situation, how about the following sample script? Sample script 1: This script parses your value using the regex. function myFunction1() { // This sample value is from your question. const sample = `<ul> <li>Material: 100% polyester with polyurethane coating</li> <li>Water column pressure: 4000mm</li> <li>Fit: Regular unisex</li> <li>Elasticated waistband with drawstring</li> <li>Elasticated cuffs with tonal coated zips</li> <li>Single back pocket with eyelet</li> <li>Concealed side pockets</li> <li>Ultrasonically welded seams</li> <li>Reflective accents</li> </ul>`; // Parse list. const obj = sample.matchAll(/<li>([\w\S\s]+?)<\/li>/g); const values = [...obj].map(e => { if (e && e.length > 1) { const temp = e[1].split(":"); return temp.length == 1? [temp[0].trim(), ""]: temp.map(f => f.trim()); } return ["", ""]; }); // Put the values to the sheet. const sheetName = "Sheet1"; // Please set the sheet name. const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName); sheet.getRange(1, 1, values.length, values[0].length).setValues(values); } When this script is run, your sample value is parsed. And, the values are put to the sheet. Sample script 2: This script parses your value using XmlService. function myFunction1() { // This sample value is from your question. const sample = `<ul> <li>Material: 100% polyester with polyurethane coating</li> <li>Water column pressure: 4000mm</li> <li>Fit: Regular unisex</li> <li>Elasticated waistband with drawstring</li> <li>Elasticated cuffs with tonal coated zips</li> <li>Single back pocket with eyelet</li> <li>Concealed side pockets</li> <li>Ultrasonically welded seams</li> <li>Reflective accents</li> </ul>`; // Parse list. const root = XmlService.parse(sample).getRootElement(); const values = root.getChildren("li", root.getNamespace()).map(e => { const temp = e.getValue().split(":"); return temp.length == 1? [temp[0].trim(), ""]: temp.map(f => f.trim()); }); // Put the values to the sheet. const sheetName = "Sheet1"; // Please set the sheet name. const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName); sheet.getRange(1, 1, values.length, values[0].length).setValues(values); } References: map() setValues(values) Added: From your following additional question, That does the job for doing it on one single product. Let's say I have a batch of product details for several different products. Like here below. Is there a way to run the script on all three at once so it becomes three different tables? In this case, how about the following sample script? Sample script: function myFunction2() { // This is from your new question. const samples = [ "<ul><li>Material: 100% polyester with polyurethane coating</li><li>Lining: 100% polyester</li><li>Insulation: 100% polyester</li><li>Measurements: H160cm x W140cm x D1cm / H63 x W55.1 x 0.4 inches</li><li>When packed: H13cm x W47cm x D25cm / H5.1 x W18.5 x D9.8 inc </li><li>Pack-carry-store system with buckles and adjustable webbing straps</li><li>Soft, quilted and padded side</li><li>Waterproof upper on reverse</li></ul>", "<ul><li>Material: 100% polyester with polyurethane coating</li><li>Water column pressure: 4000mm</li><li>Soft mesh lining</li><li>Circumference: S1 – 61.5 cm / 24.2 inches, / S2 - 66 cm / 26 inches</li></ul>", "<ul><li>Material: 100% polyester with polyurethane coating</li><li>Lining: 100% polyester </li><li>Water column pressure: 8000mm</li><li>Measurements: H16 x W21 x D8.5cm / H6.3 x W8.3 x D3.3 inches</li><li>Volume: 3 liters / 0.8 gallons</li><li>Coated tonal zip closure</li><li>Single main compartment </li><li>Detachable adjustable webbing shoulder strap </li><li>Carry handle</li></ul>" ]; const sheetNames = ["Sheet1", "Sheet2", "Sheet3"]; // Please set the sheet names. samples.forEach((sample, i) => { const root = XmlService.parse(sample).getRootElement(); const values = root.getChildren("li", root.getNamespace()).map(e => { const temp = e.getValue().split(":"); return temp.length == 1? [temp[0].trim(), ""]: temp.map(f => f.trim()); }); const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetNames[i]); sheet.getRange(1, 1, values.length, values[0].length).setValues(values); }); }</pre><p> 請參閱下面的輸入和首選 output。</p><p> 每當有一行帶有冒號的文本時,比如“材料:100% 聚酯與聚氨酯塗層”,我希望它在表中分成兩列,這樣“材料:”在第 1 列,“帶聚氨酯塗層的 100% 聚酯”在第 2 欄中。</p><p> <strong>輸入:</strong></p><pre> /** List 1 **/ <ul> <li>Material: 100% polyester with polyurethane coating</li> <li>Lining: 100% polyester</li> <li>Insulation: 100% polyester</li> <li>Measurements: H160cm x W140cm x D1cm / H63 x W55.1 x 0.4 inches</li> <li>When packed: H13cm x W47cm x D25cm / H5.1 x W18.5 x D9.8 inc </li> <li>Pack-carry-store system with buckles and adjustable webbing straps</li> <li>Soft, quilted and padded side</li> <li>Waterproof upper on reverse</li> </ul> /** List 2 **/ <ul> <li>Material: 100% polyester with polyurethane coating</li> <li>Water column pressure: 4000mm</li> <li>Circumference: S1 – 61.5 cm / 24.2 inches, / S2 - 66 cm / 26 inches</li> <li>Soft mesh lining</li> </ul> /** List 3 **/ <ul> <li>Material: 100% polyester with polyurethane coating</li> <li>Lining: 100% polyester </li> <li>Water column pressure: 8000mm</li> <li>Measurements: H16 x W21 x D8.5cm / H6.3 x W8.3 x D3.3 inches</li> <li>Volume: 3 liters / 0.8 gallons</li> <li>Coated tonal zip closure</li> <li>Single main compartment </li> <li>Detachable adjustable webbing shoulder strap </li> <li>Carry handle</li> </ul></pre><p> <strong>通緝output:</strong></p><pre> /** Table 1 (converted from List 1) **/ <table> <tbody> <tr> <td>Material:</td> <td>100% polyester with polyurethane coating</td> </tr> <tr> <td>Lining:</td> <td>100% polyester</td> </tr> <tr> <td>Insulation:</td> <td>100% polyester</td> </tr> <tr> <td>Measurements:</td> <td>H160cm x W140cm x D1cm / H63 x W55.1 x 0.4 inches</td> </tr> <tr> <td>When packed:</td> <td>H13cm x W47cm x D25cm / H5.1 x W18.5 x D9.8 inc</td> </tr> <tr> <td>Pack-carry-store system with buckles and adjustable webbing straps</td> <td></td> </tr> <tr> <td>Soft, quilted and padded side</td> <td></td> </tr> <tr> <td>Waterproof upper on reverse</td> <td></td> </tr> </tbody> </table> /** Table 2 (converted from List 2) **/ <table> <tbody> <tr> <td>Material:</td> <td>100% polyester with polyurethane coating</td> </tr> <tr> <td>Water column pressure:</td> <td>4000mm</td> </tr> <tr> <td>Circumference:</td> <td>S1 – 61.5 cm / 24.2 inches, / S2 - 66 cm / 26 inches</td> </tr> <tr> <td>Soft mesh lining</td> <td></td> </tr> </tbody> </table> /** Table 3 (converted from List 3) **/ <table> <tbody> <tr> <td>Material:</td> <td>100% polyester with polyurethane coating</td> </tr> <tr> <td>Lining:</td> <td>100% polyester</td> </tr> <tr> <td>Water column pressure:</td> <td>8000mm</td> </tr> <tr> <td>Measurements:</td> <td>H16 x W21 x D8.5cm / H6.3 x W8.3 x D3.3 inches</td> </tr> <tr> <td>Volume:</td> <td>3 liters / 0.8 gallons</td> </tr> <tr> <td>Coated tonal zip closure</td> <td></td> </tr> <tr> <td>Single main compartment</td> <td></td> </tr> <tr> <td>Detachable adjustable webbing shoulder strap</td> <td></td> </tr> <tr> <td>Carry handle</td> <td></td> </tr> </tbody> </table></pre></div>)<table> </table></ul>

[英]Convert unordered lists (<ul>) into HTML-formatted tables (<table>)

我以前一直在尋求一種解決方案,允許我將無序列表轉換為格式化的 HTML 表。

當時,一位好心的用戶提出了一個解決方案,我在下面附上了。

該解決方案將無序列表轉變為 Google 表格中的常規表格,其中不同的值被划分到它們自己的單元格中。 相反,我希望將無序列表轉換為僅放在一個單元格中的格式化 html 表列表。

如果可能的話,除此之外,我希望能夠將數百個無序列表放入腳本中,然后將其轉換為各自的 HTML 格式的表格。

請參閱下面我從另一個用戶那里獲得的先前解決方案。

希望這一切都有意義。

編輯:我還在這篇文章的最底部添加了輸入和首選 output。

In your situation, how about the following sample script?

Sample script 1:
This script parses your value using the regex.

function myFunction1() {
  // This sample value is from your question.
  const sample = `<ul>
 <li>Material: 100% polyester with polyurethane coating</li>
 <li>Water column pressure: 4000mm</li>
 <li>Fit: Regular unisex</li>
 <li>Elasticated waistband with drawstring</li>
 <li>Elasticated cuffs with tonal coated zips</li>
 <li>Single back pocket with eyelet</li>
 <li>Concealed side pockets</li>
 <li>Ultrasonically welded seams</li>
 <li>Reflective accents</li>
 </ul>`;
 
  // Parse list.
  const obj = sample.matchAll(/<li>([\w\S\s]+?)<\/li>/g);
  const values = [...obj].map(e => {
    if (e && e.length > 1) {
      const temp = e[1].split(":");
      return temp.length == 1 ? [temp[0].trim(), ""] : temp.map(f => f.trim());
    }
    return ["", ""];
  });

  // Put the values to the sheet.
  const sheetName = "Sheet1"; // Please set the sheet name.
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
  sheet.getRange(1, 1, values.length, values[0].length).setValues(values);
}
When this script is run, your sample value is parsed. And, the values are put to the sheet.
Sample script 2:
This script parses your value using XmlService.

function myFunction1() {
  // This sample value is from your question.
  const sample = `<ul>
 <li>Material: 100% polyester with polyurethane coating</li>
 <li>Water column pressure: 4000mm</li>
 <li>Fit: Regular unisex</li>
 <li>Elasticated waistband with drawstring</li>
 <li>Elasticated cuffs with tonal coated zips</li>
 <li>Single back pocket with eyelet</li>
 <li>Concealed side pockets</li>
 <li>Ultrasonically welded seams</li>
 <li>Reflective accents</li>
 </ul>`;

  // Parse list.
  const root = XmlService.parse(sample).getRootElement();
  const values = root.getChildren("li", root.getNamespace()).map(e => {
    const temp = e.getValue().split(":");
    return temp.length == 1 ? [temp[0].trim(), ""] : temp.map(f => f.trim());
  });

  // Put the values to the sheet.
  const sheetName = "Sheet1"; // Please set the sheet name.
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
  sheet.getRange(1, 1, values.length, values[0].length).setValues(values);
}
References:
map()
setValues(values)
Added:
From your following additional question,

That does the job for doing it on one single product. Let's say I have a batch of product details for several different products. Like here below. Is there a way to run the script on all three at once so it becomes three different tables?

In this case, how about the following sample script?

Sample script:
function myFunction2() {
  // This is from your new question.
  const samples = [
    "<ul><li>Material: 100% polyester with polyurethane coating</li><li>Lining: 100% polyester</li><li>Insulation: 100% polyester</li><li>Measurements: H160cm x W140cm x D1cm / H63 x W55.1 x 0.4 inches</li><li>When packed: H13cm x W47cm x D25cm / H5.1 x W18.5 x D9.8 inc </li><li>Pack-carry-store system with buckles and adjustable webbing straps</li><li>Soft, quilted and padded side</li><li>Waterproof upper on reverse</li></ul>",
    "<ul><li>Material: 100% polyester with polyurethane coating</li><li>Water column pressure: 4000mm</li><li>Soft mesh lining</li><li>Circumference: S1 – 61.5 cm / 24.2 inches, / S2 - 66 cm / 26 inches</li></ul>",
    "<ul><li>Material: 100% polyester with polyurethane coating</li><li>Lining: 100% polyester </li><li>Water column pressure: 8000mm</li><li>Measurements: H16 x W21 x D8.5cm / H6.3 x W8.3 x D3.3 inches</li><li>Volume: 3 liters / 0.8 gallons</li><li>Coated tonal zip closure</li><li>Single main compartment </li><li>Detachable adjustable webbing shoulder strap </li><li>Carry handle</li></ul>"
  ];
  const sheetNames = ["Sheet1", "Sheet2", "Sheet3"]; // Please set the sheet names.
  samples.forEach((sample, i) => {
    const root = XmlService.parse(sample).getRootElement();
    const values = root.getChildren("li", root.getNamespace()).map(e => {
      const temp = e.getValue().split(":");
      return temp.length == 1 ? [temp[0].trim(), ""] : temp.map(f => f.trim());
    });
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetNames[i]);
    sheet.getRange(1, 1, values.length, values[0].length).setValues(values);
  });
}

請參閱下面的輸入和首選 output。

每當有一行帶有冒號的文本時,比如“材料:100% 聚酯與聚氨酯塗層”,我希望它在表中分成兩列,這樣“材料:”在第 1 列,“帶聚氨酯塗層的 100% 聚酯”在第 2 欄中。

輸入:

/** List 1 **/
<ul>
<li>Material: 100% polyester with polyurethane coating</li>
<li>Lining: 100% polyester</li>
<li>Insulation: 100% polyester</li>
<li>Measurements: H160cm x W140cm x D1cm / H63 x W55.1 x 0.4 inches</li>
<li>When packed: H13cm x W47cm x D25cm / H5.1 x W18.5 x D9.8 inc </li>
<li>Pack-carry-store system with buckles and adjustable webbing straps</li>
<li>Soft, quilted and padded side</li>
<li>Waterproof upper on reverse</li>
</ul>

/** List 2 **/

<ul>
<li>Material: 100% polyester with polyurethane coating</li>
<li>Water column pressure: 4000mm</li>
<li>Circumference: S1 – 61.5 cm / 24.2 inches, / S2 - 66 cm / 26 inches</li>
<li>Soft mesh lining</li>
</ul>

/** List 3 **/

<ul>
<li>Material: 100% polyester with polyurethane coating</li>
<li>Lining: 100% polyester </li>
<li>Water column pressure: 8000mm</li>
<li>Measurements: H16 x W21 x D8.5cm / H6.3 x W8.3 x D3.3 inches</li>
<li>Volume: 3 liters / 0.8 gallons</li>
<li>Coated tonal zip closure</li>
<li>Single main compartment </li>
<li>Detachable adjustable webbing shoulder strap </li>
<li>Carry handle</li>
</ul>

通緝output:



/** Table 1 (converted from List 1) **/
<table>
<tbody>
  <tr>
    <td>Material:</td>
    <td>100% polyester with polyurethane coating</td>
  </tr>
  <tr>
    <td>Lining:</td>
    <td>100% polyester</td>
  </tr>
  <tr>
    <td>Insulation:</td>
    <td>100% polyester</td>
  </tr>
  <tr>
    <td>Measurements:</td>
    <td>H160cm x W140cm x D1cm / H63 x W55.1 x 0.4 inches</td>
  </tr>
  <tr>
    <td>When packed:</td>
    <td>H13cm x W47cm x D25cm / H5.1 x W18.5 x D9.8 inc</td>
  </tr>
  <tr>
    <td>Pack-carry-store system with buckles and adjustable webbing straps</td>
    <td></td>
  </tr>
  <tr>
    <td>Soft, quilted and padded side</td>
    <td></td>
  </tr>
  <tr>
    <td>Waterproof upper on reverse</td>
    <td></td>
  </tr>
</tbody>
</table>

/** Table 2 (converted from List 2) **/

<table>
<tbody>
  <tr>
    <td>Material:</td>
    <td>100% polyester with polyurethane coating</td>
  </tr>
  <tr>
    <td>Water column pressure:</td>
    <td>4000mm</td>
  </tr>
  <tr>
    <td>Circumference:</td>
    <td>S1 – 61.5 cm / 24.2 inches, / S2 - 66 cm / 26 inches</td>
  </tr>
  <tr>
    <td>Soft mesh lining</td>
    <td></td>
  </tr>
</tbody>
</table>

/** Table 3 (converted from List 3) **/

<table>
<tbody>
  <tr>
    <td>Material:</td>
    <td>100% polyester with polyurethane coating</td>
  </tr>
  <tr>
    <td>Lining:</td>
    <td>100% polyester</td>
  </tr>
  <tr>
    <td>Water column pressure:</td>
    <td>8000mm</td>
  </tr>
  <tr>
    <td>Measurements:</td>
    <td>H16 x W21 x D8.5cm / H6.3 x W8.3 x D3.3 inches</td>
  </tr>
  <tr>
    <td>Volume:</td>
    <td>3 liters / 0.8 gallons</td>
  </tr>
  <tr>
    <td>Coated tonal zip closure</td>
    <td></td>
  </tr>
  <tr>
    <td>Single main compartment</td>
    <td></td>
  </tr>
  <tr>
    <td>Detachable adjustable webbing shoulder strap</td>
    <td></td>
  </tr>
  <tr>
    <td>Carry handle</td>
    <td></td>
  </tr>
</tbody>
</table>

對於這種情況,我建議嘗試使用這樣的自定義公式:

function to_table(range) {

  const do_replace = text => text
    .replace(/<ul>/g,   '<table>')
    .replace(/<\/ul>/g, '</table>')
    .replace(/<li>/g,   '  <tr>\n    <td>')
    .replace(/<\/li>/g, '</td>\n  </tr>')
    .replace(/: /g, ':</td>\n    <td>')
    .replace(/(<tr>\n    <td>.+?<\/td>\n)(  <\/tr>)/gm, '$1    <td></td>\n$2');

  try { return range.map(row => do_replace(row[0])) } // for a range
  catch(e) { return do_replace(range) }               // for a single cell
}

要處理單個單元格:

在此處輸入圖像描述

要處理整列:

在此處輸入圖像描述

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM