回文判别
解决了一个回文判断的问题,收获了一些经验:
- 在线Regex学习网站:regexlearn.com/zh-cn
- 一些数组操作方法。split()、reverse()、join()等
题目传送门:创建回文检测项目: Build a Palindrome Checker | freeCodeCamp.org
题目要求如下:
- 回文是可以以相同的方式向前和向后阅读的单词或短语,忽略标点符号、大小写和空格。
- 注意:您需要删除所有非字母数字字符(标点符号、空格和符号)并将所有内容转换为相同的大小写(小写或大写),以便检查回文。
- 目标:构建一个功能类似于 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