时间戳

首页 > 解决方案 > 如何在矩形中显示我的字符串

javascript - 如何在矩形中显示我的字符串

问题描述

我正在通过方码方法构建一个秘密消息应用程序，我需要让我的字符串形成一个近乎完美的正方形/矩形（​rxc​），其中​c​是列数，​r​是行数，这样 ​c >= r​ 和 ​c - r <= 1​，

例如

“如果人类注定要留在地上，上帝就会给我们根。”

归一化为：

“如果人注定要留在地上，上帝就会有根”

并进一步组织成一个矩形，该矩形是长度的函数。规范化文本长度为 54 个字符，指示一个具有​c = 8​和​r = 7​的矩形：

“如果”

“意思”

“泰永泰”

“接地气”

“dwouldha”

“素食主义者”

“根”

代码：

JS：

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

const encodeMessage = () => {
  const message = string.value;
  
  function wordCount() {
    return message.split(" ").length;
  }
  
  function newMessage() {
    return message.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
  }
  
  function rectangleSize() {
    return Math.ceil(Math.sqrt(newMessage.length));
  }  
 
  if(wordCount < 2 || message.length < 50) {
    error.innerHTML = "invalid message!";
    return false;
  }
  
  text.innerHTML = newMessage();
  return newMessage();
}

HTML：

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

标签： javascripthtml

解决方案

***更好理解后编辑。

这会将字符串转换为小写，删除所有不是a-zor的字符0-9，并根据标准化长度的平方根将字符串拆分为块数组。

然后，您可以加入此数组并以等宽字体显示，并使用字母间距来获得“方形”代码的感觉。

function Squarinize(content) {
  let normilized = content.toLocaleLowerCase().replace(/[^a-z0-9]/g, '');
  let columns = Math.ceil(Math.sqrt(normilized.length));
  let square = [];
  for (i = 0; i < normilized.length; i += columns) {
    square.push(normilized.slice(i, i + columns));
  }
  document.getElementById("myDiv").innerHTML = square.join('<br />');
}

window.onload = function(e) {
  Squarinize('test value')
}
<div style="font-family: monospace; letter-spacing: 10px;" id="myDiv"></div>

结果：

t e s
t v a
l u e

推荐阅读