javascript - 如何使用方码方法创建秘密消息应用程序？

Question

我需要创建一个秘密消息应用程序，例如：

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

归一化为：

"ifmanwasmeanttostayonthegroundgodwouldhavegivenusroots"

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

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

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

然后通过从左到右向下读取列来获得编码消息

"imtgdvsfearwermayoogoanouuiontnnlvtwttddesaohghnsseoau"

并进一步拆分为

"imtgdvs fearwer mayoogo anouuio ntnnlvt wttddes aohghn sseoau"

生成的非完美矩形的密码文本最后一行只能有一个空格。

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

这是我到目前为止所做的，我只能得到我的规范化文本，但我做错了将它转换为矩形并从中获取密码文本。

const output = document.querySelector('#encoded_rectangle');
const encodedChunks = document.querySelector('#encoded_chunks');
const text = document.querySelector('#normalized_text');
const string = document.querySelector('#message');
const error = document.querySelector('#alert');

const encodeMessage = () => {
  let message = string.value;

  function wordCount() {
    return message.split(" ").length;
  }

  if (wordCount < 2 || message.length < 50) {
    error.innerHTML = "Invalid message, Input more than one word and at Least 50 characters!";
    return false;
  }

  function normaliseMessage() {
    return message.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
  }

  function rectangleSize() {
    return Math.ceil(Math.sqrt(normaliseMessage.length));
  }

  function splitRegEx() {
    return new RegExp(".{1," + rectangleSize + "}", "g");
  }

  function plaintextSegments() {
    return normaliseMessage.match(splitRegEx);
  }

  function ciphertext() {
    var columns = [],
      currentLetter, currentSegment;
    var i, j;

    for (let i = 0; i < rectangleSize; i++) {
      columns.push([]);
    }

    for (i = 0; i < plaintextSegments.length; i++) {
      currentSegment = plaintextSegments[i];

      for (j = 0; j < columns.length; j++) {
        currentLetter = currentSegment[j];
        columns[j].push(currentLetter);
      }
    }

    for (i = 0; i < columns.length; i++) {
      columns[i] = columns[i].join("");
    }

    return columns.join("");
  }

  function normalizeCipherText() {
    return ciphertext.match(splitRegEx).join(" ");
  }

  text.innerHTML = plaintextSegments();
  encodedChunks.innerHTML = ciphertext();
  output.innerHTML = normalizeCipherText();
}

<form>
  <input type="text" placeholder="Type your secret message" id="message">
  <p id="alert"></p>
  <button type="button" class="button" onclick="encodeMessage()">Encode message</button>
</form>
<div class="box">
  <h3>Normalised Text</h3>
  <p id="normalized_text"></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

您的大部分代码都是由非常短的方法构成的。
通常我会考虑一个好的做法，但在这种情况下，我认为它只会降低代码的可读性。

此外，我不得不说，就解决问题而言，HTML 部分不是必需的——这显然与 Javascript/算法相关。

这是我的解决方案，可以对其进行修改以匹配您的上下文：

const input = "If man was meant to stay on the ground, god would have given us roots.";
const normalizedInput = input.replace(/[^\w]/g, "").toLowerCase();
const length = normalizedInput.length;
const cols = Math.ceil(Math.sqrt(length));
const rows = Math.ceil(length / cols);

var cypherText = "";

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

console.log(cypherText);