javascript 使用HTML将文本转换为无序、有序或表格

3wabscal 于 2023-03-16 发布在 Java

关注(0)|答案(1)|浏览(109)

我有一个网站，就像聊天网站.
我想自动检测列表和表格，并将其格式化为HTML代码。
例如给定的输入
令文本= 1. Pizza2. Burgers3. Tacos4. Sushi5. Pasta6. Fried chicken7. Ramen8. Curry9. Steak10. Ice cream;将其转换为有序列表
设输出= <ol><li>Pizza</li><li>Burgers</li>...</ol>;
和表的数据
令文本= | Rank | Game | |------|------------------------------| | 1 | The Witcher 3: Wild Hunt | | 2 | Grand Theft Auto V | | 3 | Portal 2 | | 4 | Half-Life 2 | | 5 | Overwatch | | 6 | Counter-Strike: Global Offensive | | 7 | Doom (2016) | | 8 | Dark Souls III | | 9 | Divinity: Original Sin II | | 10 | Stardew Valley |;
转换成HTML代码。
注意，这不应删除列表或表格前后的任何文本，例如
let input =“嘿看看最流行的视频游戏为PC. 1.我的世界2. PUBG....”不应该删除嘿看看最流行的视频游戏为PC！！
我试过这个代码，但遗憾的是没有工作

function convertTextToHTML(text) {
  const lines = text.split("\n");
  let result = "";
  let isTable = false;
  let isList = false;
  let tableHeaders = [];

  for (let line of lines) {
    if (line.startsWith("|") && line.endsWith("|")) {
      isTable = true;
      const cells = line.split("|").slice(1, -1);
      if (tableHeaders.length === 0) {
        tableHeaders = cells.map((cell) => `<th>${cell.trim()}</th>`);
        result += "<table><thead><tr>" + tableHeaders.join("") + "</tr></thead><tbody>";
      } else {
        const tableCells = cells.map((cell) => `<td>${cell.trim()}</td>`);
        result += "<tr>" + tableCells.join("") + "</tr>";
      }
    } else if (line.startsWith("*")) {
      isList = true;
      if (result.indexOf("<ul>") === -1) {
        result += "<ul>";
      }
      result += "<li>" + line.slice(1).trim() + "</li>";
    } else {
      if (isTable) {
        result += "</tbody></table>";
        isTable = false;
        tableHeaders = [];
      }
      if (isList) {
        result += "</ul>";
        isList = false;
      }
      result += line + "<br>";
    }
  }
  if (isTable) {
    result += "</tbody></table>";
  }
  if (isList) {
    result += "</ul>";
  }
  return result;
}

JavaScript

来源：https://stackoverflow.com/questions/75750209/converting-text-into-unordered-ordered-or-tables-using-html

1条答案

按热度按时间

hwamh0ep1#

根据您确定如何区分字符串的 * 方式，即您将格式化为table还是ol，您可以使用split和regex或特定字符串来输出匹配值的数组，然后可以在特定函数中格式化这些值。
因此，如果您的字符串包含一个可以用作.split方法的 determining string 的 specific string，则在该字符串处拆分并创建一个可以迭代的数组，然后可以根据这些字符串的内容对它们进行求值和格式化。
我的示例使用了一个forEach循环，该循环迭代一个节点的注解列表，然后使用一个条件检查每个节点的textContent是否包含一个 * 特定的字符串 * 或 * 标识符，这些字符串或标识符将用于将这些 * 注解字符串 * 拆分为各自的部分，以便进一步格式化。我检查字符串是否包含一个竖线，后跟一个空格，后跟另一个竖线--〉| |，例如，这在我构建和格式化表的方法中使用。因此我们可以在条件的这一部分中运行buildTable方法。同样的逻辑可以应用于orderedlist，它仅仅取决于如何你选择拆分这些字符串，以及***的意思是什么***和***方法***你用来实现你的格式化方案--〉| |表格，然后在由空格|包围的单个管道处拆分辅助字符串，等等。
希望这能有所帮助。让我知道，如果有什么不清楚的代码或如果你正在寻找一个不同的结果来。

const comments = document.querySelectorAll('.comments');

const buildOL = (arr) => {
  let output = '';
  arr.forEach((li, i) => i < 1 ? output += `<ol>${li.trim()}:` : output += `<li>${li.trim()}</li>`)
  output += '</ol>';
  return output;
}

const buildTable = (arr) => {
  let output = '<table>';
  let i = 0;
  arr.forEach(str => {
    output += `<tr>`;
    str.includes(' | ') ?
      str.split(' | ').forEach(col => output += `<td>${col.trim()}</td>`) :
      output += `<td colspan="2">${str.trim()}</td>`;
    output += `</tr>`;
  })
  output += `</table>`;
  return output;
}

comments.forEach(comment => {
  if (comment.textContent.includes('| |')) {
    comment.innerHTML = buildTable(comment.textContent.split(/\| \|/g))
  } else if (comment.textContent.match(/[0-9]. /)) {
    comment.innerHTML = buildOL(comment.textContent.split(/[0-9]. /))
  }
})

.comments:not(:nth-of-type(1)) {
  margin-top: 2rem;
}

li {
  margin-left: 1rem;
}

<div class="comments">My favorite foods are 1. Pizza2. Burgers3. Tacos4. Sushi5. Pasta6. Fried chicken7. Ramen8. Curry9. Steak10. Ice cream</div>
<div class="comments">This is how I would rank the games. | | Rank | Game | | 1 | The Witcher 3: Wild Hunt | | 2 | Grand Theft Auto V | | 3 | Portal 2 | | 4 | Half-Life 2 | | 5 | Overwatch | | 6 | Counter-Strike: Global Offensive | | 7 | Doom (2016) | | 8 | Dark Souls III
  | | 9 | Divinity: Original Sin II | | 10 | Stardew Valley | |</div>
<div class="comments">This comment has no formatting what so ever</div>

赞(0）回复(0）举报 2023-03-16

我来回答

javascript 使用HTML将文本转换为无序、有序或表格

1条答案

相关问题

热门标签

最新问答