javascript - 如何从我的秘密消息字符串中形成一个矩形

Question

我正在创建一个密码应用程序，其中

"If man was meant to stay on the ground, god would have given us roots."

归一化为：

"ifmanwasmeanttostayonthegroundgodwouldhavegivenusroots"

规范化的文本将形成一个矩形（​r × c​），其中​c​是列数，​r​是行数，使得​c >= r​和​c - r <= 1​，

因此，例如，规范化的文本是 54 个字符长，用​c = 8​ 和​r = 7​指示一个矩形：

"ifmanwas"
"meanttos"
"tayonthe"
"groundgo"
"dwouldha"
"vegivenu"
"sroots "

然后通过向下读取从左到右的列来获得编码消息，并用于形成这样的编码块

"imtgdvs fearwer mayoogo anouuio ntnnlvt wttddes aohghn sseoau"

编码的消息/密码文本形成一个矩形。

"imtgdvs"
"fearwer"
"mayoogo"
"anouuio"
"ntnnlvt"
"wttddes"
"aohghn "
"sseoau "

我已经对纯文本进行了规范化 ✅</p>

我无法制作规范化文本的矩形❌</p>

我没有将编码的代码分块分隔为单个字符串❌</p>

我已将编码消息写在一个矩形中✅</p>

const string = document.querySelector('#message');
        const error = document.querySelector('#alert');
         
        const encodeMessage = () => {
            const message = string.value;
            const normalisedText = message.replace(/[^\w]/g, "").toLowerCase();
            const textCount = normalisedText.length;
            const wordCount = message.split(" ").length;
            const cols = Math.ceil(Math.sqrt(textCount));
            const rows = Math.ceil(textCount / cols);

            if (wordCount < 2 || message.length < 50) {
            error.innerHTML = `You have ${textCount} character(s) and ${wordCount} word(s). Input must be more than one word and at Least 50 characters!`;
            return false;
            }
  
            let cypherText = "";

            for (let i = 0; i < cols; i ++) { 
                for (let j = i; j < normalisedText.length; j += cols) {
                    cypherText += normalisedText[j];
                }
                cypherText += '\n';
            }

            // document.querySelector('#normalized_rectangle').innerHTML = normalisedText in rectangle;
            // document.querySelector('#encoded_chunks').innerHTML = cypherText as a single text with space in between;
            document.querySelector('#encoded_rectangle').innerHTML = cypherText;
            return cypherText;
        }

<form>
                <input type="text" placeholder="Type your secret message" id="message">
                <button type="button" class="button" onclick="encodeMessage()">Encode message</button>
            </form>
            <p id="alert"></p>     
      
            <div class="box">
                <h3>Normalised Rectangle</h3>
                <p id="normalized_rectangle"></p>
            </div>
    
            <div class="box">
                <h3>Encoded Chunks</h3>
                <p id="encoded_chunks">
            </p>
            </div>
    
            <div class="box">
                <h3>Encoded Rectangle</h3>
                <p id="encoded_rectangle">
            </p>
            </div>

标签： javascripthtml

Answer 1

循环遍历字符串并使用子字符串制作长度为 8 的字符串，然后将其推入数组中，再次在数组上循环并制作新字符串

    text = "ifmanwasmeanttostayonthegroundgodwouldhavegivenusroots";
    c = 8;
    r = 7;
    arr = [];
    cipherText = "";
    plainText = "";
    index = 0;

    for (i = 0; i < r; i++) {
      arr.push(text.substring(index, index + 8))
      index = index + 8;
      plainText = plainText + arr[i]+"\n";
    }
    for (j = 0; j < c; j++) {
      str = ""
      for (k = 0; k < r; k++) {
      if(arr[k][j] != undefined)  str = str + arr[k][j];

      }
      cipherText = cipherText + str +"\t";
    }
    console.log(plainText);
    console.log(cipherText);