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);