update

src/pages/index/index.jsx

@@ -55,7 +55,11 @@ const markTextStr = `
    `;
 
 let tablecellArr = [];
-let maxLengthCell=null
+let tableRowArr = [];
+let maxLengthCell = null;
+let bodydata = null;
+let headerdata = null;
+let maxWidths = null;
 
 marked.setOptions({
   breaks: true, // 是否回车换行
@@ -167,43 +171,126 @@ renderer.blockquote = function (quote) {
   return `<span style="white-space:pre;" class="blockquote">\t👉${content}</span><br/> `;
 };
 
+function formatTable(arr) {
+  // 计算每列的最大宽度
+ const maxWidths = Array.from({ length: arr[0].length }, () => 0);
+  arr.forEach((row) => {
+    row.forEach((cell, index) => {
+      const width = cell.replace(/[\u4e00-\u9fa5]/g, "  ").length; // 中文字符算两个宽度
+      maxWidths[index] = Math.max(maxWidths[index], width);
+    });
+  });
+
+  // 使用 &nbsp; 填充每个元素
+  const formattedArr = arr.map((row) =>
+    row
+      .map((cell, index) => {
+        const width = maxWidths[index];
+        const padding = "&nbsp;".repeat(
+          width - cell.replace(/[\u4e00-\u9fa5]/g, "  ").length
+        );
+        return `${cell}${padding}`;
+      })
+      .join(" | ")
+  );
+
+  // 构建 Markdown 表格
+  const markdownTable = formattedArr.map((row) => `|${row} | <br/>`).join("\n");
+
+  return markdownTable;
+}
+
 renderer.table = function (header, body) {
+  console.log("tableRowArr", tableRowArr);
+  // 分析第一个元素中有多少个 | 字符
+  const firstElementPipesCount = tableRowArr[0].split("|").length - 1;
+  console.log("第一个元素中 | 的数量：", firstElementPipesCount);
+
+  console.log("tablecellArr", tablecellArr);
+  maxLengthCell = tablecellArr.reduce(
+    (max, str) => Math.max(max, str.length),
+    0
+  );
+
+  // 构建表达式
+  const expression = Array.from({ length: firstElementPipesCount }, () =>
+    "-".repeat(maxLengthCell)
+  ).join(" | ");
+  console.log("expression", expression);
+
+  bodydata = tableRowArr.map((item) =>
+    item
+      .split("|")
+      .map((str) => str.trim())
+      .filter(Boolean)
+  );
+  console.log("bodydata", bodydata);
+  // 测试数据
+  // const data = [
+  //   ['列表1', '列表2'],
+  //   ['这是网址', '你好啊'],
+  //   ['abcd', '你好啊']
+  // ];
+
+  // 格式化表格并输出
+  const formattedTable = formatTable(bodydata);
+  const headerdata = formatTable([[header]]);
+  console.log("headerdata,", headerdata);
+
+  // const maxWidths = 5; // 替换为实际的最大字符宽度
+
+  function calculateWidth(str) {
+    let width = 0;
+    for (let i = 0; i < str.length; i++) {
+      // 判断字符是否是中文，是的话宽度加2，否则加1
+      width += /[\u4e00-\u9fa5]/.test(str[i]) ? 2 : 1;
+    }
+    return width;
+  }
+  
+  const str = '这是网址';
+  const maxWidths = calculateWidth(str);
+  console.log(maxWidths); // 输出字符宽度
+
+
+  console.log("maxWidths", maxWidths);
+  // // 构建表达式
+  // const expression = Array.from({ length: firstElementPipesCount }, () =>
+  //   "-".repeat(maxWidths)
+  // ).join(" | ");
+  // console.log("expression", expression);
+
+  console.log("formattedTable", formattedTable);
+  console.log("{header}", `${header}`);
+  console.log("{body}", `${body}`);
+
+  console.log("{header}${body}", `${header}${body}`);
   // return `${header}${body}`;
-  console.log(`📊 表格标题 📊<br/>${header}${body}`);
+  console.log(`📊 表格 📊<br/>${header}${body}`);
-  return `📊 表格标题 📊<br/>${header} |${'-'.repeat(maxLengthCell) }| --- | --- |<br/>${body} `;
+
+  // return `📊 表格 📊<br/>${header} |${expression}|<br/>${body} `;
+  return `📊 表格 📊<br/>${header} |${expression}|<br/>${formattedTable} `;
 };
 
 // 重写表格头部渲染函数
 renderer.tablerow = function (content) {
-  // console.log(`|${content} <br/>\n`)
+  // console.log("maxLengthCell", maxLengthCell);
+
+  console.log(`|${content} <br/>\n`);
+  tableRowArr.push(content);
   return `|${content} <br/>\n`;
 };
 
 // 重写表格单元格渲染函数
 renderer.tablecell = function (content, flags) {
+  console.log("flags", flags);
   // 清除其他 HTML 标签，保留 - 和 | 字符
   content = content.replace(/<(?!br\/)[^>]*>?/gm, "");
-  console.log(`${content} | `);
+  // console.log(`${content} | `);
   // 添加到数组,并计算最大的字符长度
   tablecellArr.push(content);
-  console.log("tablecellArr", tablecellArr);
+  // console.log("tablecellArr", tablecellArr);
-  const longestString = tablecellArr.reduce(
-    (acc, cur) => {
-      // 获取当前字符串的长度
-      const curLength = cur.length;
-      // 如果当前字符串的长度大于之前记录的最大长度，则更新最大长度和字符串
-      if (curLength > acc.maxLength) {
-        acc.maxLength = curLength;
-        acc.longestString = cur;
-      }
 
-      return acc;
-    },
-    { maxLength: 0, longestString: "" }
-  );
-  // console.log("最长的字符串：", longestString.longestString);
-  // console.log("长度值：", longestString.maxLength);
-  maxLengthCell= longestString.maxLength
   return `${content} | `;
 };
 
@@ -213,11 +300,11 @@ marked.use({ renderer });
 // export default class Index extends Component {
 const Index = () => {
   const [markText, setmarkText] = useState(`
-  | 11 ww | 12ww | 13ww |
+  | 列表1 |  列表2  |
-  | --- | --- | --- |
+  | --- | --- | 
-  | 21 | 22 | 23  |
+  | 这是网址我爱你你好啊| 你好啊| 
-  | 31  | 32   | 33  |
+  | abcd | 你好啊 |
-  | 41   | 42   | 4333333  |
+
   `);
   const [oldmarkText, setoldmarkText] = useState(null);
   const [currentRender, setcurrentRender] = useState(null);