JavaScript 教程：从字符串模板中识别用户填充的空白-js教程-PHP中文网

JavaScript 教程：从字符串模板中识别用户填充的空白

心靈之曲

发布： 2025-09-14 20:29:01

原创

421人浏览过

javascript 教程：从字符串模板中识别用户填充的空白

本文将介绍一个 JavaScript 函数，该函数用于识别用户在字符串模板中填充的空白，并将其提取出来。该函数能够处理各种情况，包括空白被替换为空字符串以及空白位于单词内部的情况。

使用正则表达式识别填充的空白

解决此问题的关键在于使用正则表达式。我们可以将模板字符串转换为一个正则表达式，其中空白（____）被替换为捕获组 (.*)。这样，我们就可以使用正则表达式的 match 方法从用户的输入中提取出填充的空白内容。

以下是实现此功能的 JavaScript 代码：

const fillBlanks = (template, response, match = response.match(new RegExp(
  template.replace(/[/-\^$*+?.()|[]{}]/g, '\$&') // 转义正则表达式特殊字符
           .replace(/ /g, '\s*')                     // 压缩空格
           .replace(/____/g, '(.*)'),         // 添加捕获组
  "m"                                                 // 多行匹配
))) => match && match.slice(1);

console.log(fillBlanks('____ World!', 'Hello World!')); //=> ["Hello"]
console.log(fillBlanks('H____o ____World!', 'Hello World!')); //=> ["ell", ""]

const template = `____ = ____("Enter your name")
____(name)`;

const answer = `name = input("Enter your name")
print(name)`;

console.log(fillBlanks(template, answer)); //=> ["name", "input", "print"]

登录后复制

代码解释：

立即学习“Java免费学习笔记（深入）”；

fillBlanks(template, response) 函数：
- 接收两个参数：template (字符串模板) 和 response (用户的输入字符串)。
- 使用正则表达式从 response 中匹配 template 中的空白。
*`template.replace(/[/-^$+?.()|[]{}]/g, '$&')`：**
- 转义正则表达式中的特殊字符，确保模板字符串中的特殊字符不会被错误地解释为正则表达式的元字符。这是通过使用 replace 方法和一个正则表达式来实现的，该正则表达式匹配所有需要转义的特殊字符，并将它们替换为转义后的版本。
*`replace(/ /g, 's')`：**
- 将模板字符串中的空格替换为 s*，这意味着允许零个或多个空白字符。这使得函数能够处理用户在空白处输入多个空格的情况。
- 注意： 此处压缩空格可能会导致一些不希望的匹配。例如，模板 "H____o ____ World!" 如果用户输入至少两个空格可能无法匹配 "Hello World!" (只有一个空格)。
*`replace(/____/g, '(.)')`：**
- 将模板字符串中的 ____ 替换为 (.*)，这是一个捕获组，用于捕获用户在空白处输入的字符串。.* 表示匹配任意字符零次或多次。
new RegExp(..., "m")：
- 创建一个新的正则表达式，使用转换后的模板字符串和 "m" 标志（多行匹配）。
match && match.slice(1)：
- 如果匹配成功（match 不为 null），则返回一个包含所有捕获组的数组。slice(1) 用于移除第一个元素，该元素是完整的匹配字符串，我们只需要捕获组中的内容。