如何使用平方码方法创建秘密消息应用程序?

时间:2019-06-22 16:13:15

标签: javascript html

我需要创建一个秘密消息应用程序,例如文本:

"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>

2 个答案:

答案 0 :(得分: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);

答案 1 :(得分:1)

这就是我想出的

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;

    var normalisedText = message.replace(/[^a-zA-Z0-9]/g, "");
    var textCount = normalisedText.length;
    if (textCount < 50) {
        console.log("Invalid message, Input more than one word and at Least 50 characters!");
        return false;
    }
    var higest = Math.ceil(Math.sqrt(textCount));
    
    var lowest = Math.ceil(textCount/higest);
    var rect = [];
    var coded = [];
    var innerObj = {};
    var resulting = "";
    
    rect = rectangleSize(higest,lowest,normalisedText);
    //read text from top-down i hotago!!!   
    coded = readFromTopDown(rect, higest);
    coded.forEach(co => {
        resulting += co.trim();
    });
    //nwa idi sharp, nice logic
    console.log("Normalized: " + normalisedText);
    console.log("Count: " + textCount);
    console.log(rect);
    console.log(coded);
    console.log("Resulting: " + resulting);    

    function rectangleSize(higest, lowest, normalise) {
        var rect = [];
        var startIndex = 0;
        for(var i = 0; i < lowest; i++){        
            if(i !== 0)
                startIndex += higest;
            if(normalise.substring(startIndex, startIndex + higest).length == higest){
                rect.push(normalise.substring(startIndex, startIndex + higest))
            }else{
                //get the remainder as spaces
                var spaces = higest - normalise.substring(startIndex, startIndex + higest).length;
                var textI = normalise.substring(startIndex, startIndex + higest);
                var str = textI + new Array(spaces + 1).join(' ');
                rect.push(str);
            }
        }
        return rect;
    }

    function readFromTopDown(rect, higest) { 
        var coded = [];
        for(var i = 0; i < higest; i++){   
            var textMain = "";     
            rect.forEach(re => {
                textMain += re.substring(i, i+1);
            });
            coded.push(textMain);
        }
        return coded;
    }

}
<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> 

尝试看看