freeCodeCamp JS从零开始的打怪升级之路 #1

77 阅读2分钟

回文判别

解决了一个回文判断的问题,收获了一些经验:

  1. 在线Regex学习网站:regexlearn.com/zh-cn
  2. 一些数组操作方法。split()、reverse()、join()等

题目传送门创建回文检测项目: Build a Palindrome Checker | freeCodeCamp.org

题目要求如下:

  1. 回文是可以以相同的方式向前和向后阅读的单词或短语,忽略标点符号、大小写和空格。
  2. 注意:您需要删除所有非字母数字字符(标点符号、空格和符号)并将所有内容转换为相同的大小写(小写或大写),以便检查回文。
  3. 目标:构建一个功能类似于 palindrome-checker.freecodecamp.rocks 的应用程序

贴出思考过程和代码片段:( 解题思路见文末注释 )

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Palindrome Checker</title>
</head>
<body>
  <input id="text-input"></input>
  <button id="check-btn">check</button>
  <div id="result">Is it a palindrome?</div>
  <script src="./script.js"></script>
</body>
</html>
// 对页面上的DOM元素进行初始化,以在JS中操作接下来的逻辑。

const checkButton = document.getElementById("check-btn");
const textInput = document.getElementById("text-input");
const message = document.getElementById("result");

checkButton.addEventListener("click", output)

function output() {
  let words = document.getElementById("text-input").value

  if (words === "") {alert("Please input a value")}
  else {
  const regex1 = /\W/g;
  // 第一次匹配所有非字母、数字、下划线的字符串内容
  const regex2 = /_/g;
  // 第二次匹配所有字符串内容
  let cleanWords = words.replace(regex1, "")
  let cleanerWords = cleanWords.replace(regex2,"").toLowerCase()

  if (cleanerWords.split("").reverse().join("") === cleanerWords) {
    message.textContent = `${words} is a palindrome.`
  } else {
    message.textContent = `${words} is not a palindrome.`
  }
}
}

// **解题思路**
// 写一个关于输入内容是否符合回文的逻辑
// 1. 拿到输入的字符串内容
// 2. 去处内容中的标点符号、空格 
// 3. 将大小写一律转换为大写
// 4. 判断字符串内容的中间位置
// 5. 奇数 || 偶数
// 6. 分别拿出前半部分和后半部分的内容
// 7. 后半部分内容.split("").reverse().join("")
// 8. 判断是否相等
// 9. 相等就是true,不等就是false

// 反省:其实步骤4到步骤7都复杂了,只用看看颠倒后的字符串和之前相不相等就行
// 简化核心 cleanWords.split("").reverse().join("") === cleanWords