diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx
index b144a5f..fddbf40 100644
--- a/src/pages/index/index.jsx
+++ b/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 `\t👉${content}
`;
};
+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);
+ });
+ });
+
+ // 使用 填充每个元素
+ const formattedArr = arr.map((row) =>
+ row
+ .map((cell, index) => {
+ const width = maxWidths[index];
+ const padding = " ".repeat(
+ width - cell.replace(/[\u4e00-\u9fa5]/g, " ").length
+ );
+ return `${cell}${padding}`;
+ })
+ .join(" | ")
+ );
+
+ // 构建 Markdown 表格
+ const markdownTable = formattedArr.map((row) => `|${row} |
`).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(`📊 表格标题 📊
${header}${body}`);
- return `📊 表格标题 📊
${header} |${'-'.repeat(maxLengthCell) }| --- | --- |
${body} `;
+ console.log(`📊 表格 📊
${header}${body}`);
+
+ // return `📊 表格 📊
${header} |${expression}|
${body} `;
+ return `📊 表格 📊
${header} |${expression}|
${formattedTable} `;
};
// 重写表格头部渲染函数
renderer.tablerow = function (content) {
- // console.log(`|${content}
\n`)
+ // console.log("maxLengthCell", maxLengthCell);
+
+ console.log(`|${content}
\n`);
+ tableRowArr.push(content);
return `|${content}
\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);
- const longestString = tablecellArr.reduce(
- (acc, cur) => {
- // 获取当前字符串的长度
- const curLength = cur.length;
- // 如果当前字符串的长度大于之前记录的最大长度,则更新最大长度和字符串
- if (curLength > acc.maxLength) {
- acc.maxLength = curLength;
- acc.longestString = cur;
- }
+ // console.log("tablecellArr", tablecellArr);
- 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 |
- | --- | --- | --- |
- | 21 | 22 | 23 |
- | 31 | 32 | 33 |
- | 41 | 42 | 4333333 |
+ | 列表1 | 列表2 |
+ | --- | --- |
+ | 这是网址我爱你你好啊| 你好啊|
+ | abcd | 你好啊 |
+
`);
const [oldmarkText, setoldmarkText] = useState(null);
const [currentRender, setcurrentRender] = useState(null);