2025-07-26 竖排文字转横排

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>竖排文字转横排</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/css.css">
    </head>
    <body>
        <p>
            <pre>
                出戌大巳巳用喜
                行时吉未时丑神
                五日是时亦时东
                鬼破日向吉天北
                死凶午上出乙方
                门酉时列行贵贵
                同时五各宜人神
                在截不方用上西
                东路遇迎子吉南
                南空申喜丑子方
                方亡时神寅寅炷
                勿不月贵卯卯香
                向宜破神辰辰宜
            </pre>
        </p>
        <p>转换后</p>
        <p id="rotateMatrix"></p>
        <script src="js/js.js" async defer></script>
       
    </body>
</html>

js

//计算一段文本的行数和最大列数
function calculateLinesAndMaxLength(text) {
    // 使用正则表达式匹配所有换行符,包括Unix的\n和Windows的\r\n
    const newlineRegex = /\r\n|\n/g;
    // 使用split方法根据换行符分割字符串,得到行数组
    const lines = text.split(newlineRegex);
    // 初始化行数和最大列数
    let linesCount = lines.length;
    let maxColumnCount = 0;
    // 遍历每一行,更新最大列数
    lines.forEach(line => {
      // 获取当前行的长度,即列数
      const columnCount = line.length;
      // 如果当前行的列数大于已知的最大列数,则更新最大列数
      if (columnCount > maxColumnCount) {
        maxColumnCount = columnCount;
      }
    });
    // 返回行数和最大列数
    return {
      linesCount: linesCount,
      maxColumnCount: maxColumnCount
    };
  }
  
  //以文字填充矩阵
  function createTextMatrix(text, maxColumns) {
    // 将文本按行分割
    const lines = text.split("\n");
    // 初始化二维数组,大小为行数 x 最大列数,所有元素初始化为空字符串
    const matrix = Array.from({ length: lines.length }, () => Array(maxColumns).fill(""));
    // 遍历每一行
    lines.forEach((line, rowIndex) => {
      const lineLength = line.length;
      // 遍历当前行的每个字符,将其放入二维数组对应的位置
      for (let colIndex = 0; colIndex < lineLength; colIndex++) {
        matrix[rowIndex][colIndex] = line[colIndex];
      }
      // 如果当前行文本长度小于最大列数,使用 "■" 填充剩余部分
      for (let fillIndex = lineLength; fillIndex < maxColumns; fillIndex++) {
        matrix[rowIndex][fillIndex] = "■";
      }
    });
    // 返回生成的二维数组
    return matrix;
  }
  
  //旋转矩阵
  function rotateMatrix(matrix, clockwise) {
    const n = matrix.length;
    const m = matrix[0].length;
    const result2 = [];
    // 创建一个与原矩阵大小相同的新矩阵,用于存放旋转后的结果
    for (let i = 0; i < m; i++) {
      result2.push(new Array(n).fill(0));
    }
    // 根据旋转方向,更新新矩阵的值
    for (let i = 0; i < n; i++) {
      for (let j = 0; j < m; j++) {
        if (clockwise) {
          // 逆时针旋转:新位置是原矩阵的 (m - j - 1, i)
          result2[m - j - 1][i] = matrix[i][j];
        } else {
          // 顺时针旋转:新位置是原矩阵的 (j, n - i - 1)
          result2[j][n - i - 1] = matrix[i][j];
        }
      }
    }
    return result2;
  }
  /* 示例矩阵
  const k = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
    [10, 11, 12]
  ]; */
  
  // 示例使用
  const text = "出戌大巳巳用喜\n行时吉未时丑神\n五日是时亦时东\n鬼破日向吉天北\n死凶午上出乙方\n门酉时列行贵贵\n同时五各宜人神\n在截不方用上西\n东路遇迎子吉南\n南空申喜丑子方\n方亡时神寅寅炷\n勿不月贵卯卯香\n向宜破神辰辰宜";
  const result = calculateLinesAndMaxLength(text);
  console.log("行数:",result.linesCount);
  console.log("最大列数:",result.maxColumnCount);
  // 创建文本矩阵
  const matrix = createTextMatrix(text, result.maxColumnCount);
  // 打印二维数组为文本形式
  matrix.forEach(row => {
    console.log(row.join(""));
  });
  
  // 逆时针旋转90度
  const a = rotateMatrix(matrix, true);
  console.log("逆时针旋转后的矩阵:");
  a.forEach(row => {
      console.log(row.join(""));
    });
  
  
  document.getElementById("rotateMatrix").innerHTML = a.map(row => row.join('')).join('<br>');
  
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容