javascript - 使用 JavaScript 正则表达式的条件渲染

Question

我需要匹配这样的字符串:

'如果国家/地区等于“美国”则显示'

我正在使用 Sitecore 中的 Webforms for Marketers Module。 Sitecore 是一个基于 .NET 的 CMS。 Webforms for Marketers Modules 是一个为非开发人员提供 GUI 的模块，用于设计带有文本框、下拉列表、复选框等的表单...前一个字段中的选项。例如:如果用户从国家/地区下拉列表中选择“美国”，则仅显示国家/地区下拉列表。问题是，WFFM 模块不支持字段的条件渲染，所以我尝试自己用 JavaScript 实现它。我的想法是这样的:

• 我将在模块中构建包含所有可能字段的表单
• 当页面加载时，我将使用 JavaScript 隐藏依赖于先前字段值的字段
• 当用户与某个字段交互时，我将运行一些 JavaScript 来检查该字段的值并确定我是否应该显示我在页面加载时隐藏的一个或多个字段。

我基本上是在为 if 语句编写解释器；我正在为营销人员提供一种“编程”表格的方法。 Country 是我页面上下拉列表的名称。 equals 是一个条件。 "United States" 是下拉列表中的值之一。如果用户在下拉列表中选择 United States，then Show States 下拉列表。

因此正则表达式测试的输入将始终遵循以下格式:

• 总是以关键字 if 开头
• 后跟 1 个或多个空格
• 后跟任意数量的数字和/或字母和/或空格
  • 控件名称可以包含多个单词，空格和偶数
    • 例如:名字，或地址第 1 行
• 后跟 1 个或多个空格
• 后跟关键字equals
• 后跟 1 个或多个空格
• 后跟 1 个双引号
• 后跟任意数量的数字和/或字母和/或空格
  • 控件的值可以包含多个带空格和偶数的单词
• 后跟 1 个双引号
• 后跟 1 个或多个空格
• 后跟关键字then
• 后跟关键字 Show 或关键字 Hide

我有这么多的工作，但这并不是我上面列出的所有要求。此行一直匹配到控件名称后的空白区域。

var pattern =/^if\s+(\d*|\w*)\s+.*$/;

但是当我尝试匹配双引号时它不起作用；我真的不知道在双引号上匹配的语法。我已经尝试了以下所有方法，但均无效:

var pattern =/^if\s+(\d*|\w*)\s+["].*$/;

var pattern =/^if\s+(\d*|\w*)\s+\".*$/;

var pattern =/^if\s+(\d*|\w*)\s+\"{1}.*$/;

我们将不胜感激您提供的任何帮助!

Answer 1

我建议这样表达:

/^if\s+([\w\s]+)\s+equals\s+"([\w\s]*)"\s+then\s+(\w*)$/

你可以这样使用:

var expression = // set this to your input
var matches = expression.match(/^if\s+([\w\s]+)\s+equals\s+"([\w\s]*)"\s+then\s+(\w*)$/);

if (matches) { // if matches isn't null
    // matches[1] is the field name
    // matches[2] is the value in quotes
    // matches[3] is the operation to perform

我没有将“Hide”和“Show”硬编码到正则表达式中——而是返回“then”之后的任何字符串。我认为这会让以后添加更多操作变得更容易。如果您想对这些操作名称进行硬编码，只需将最后的 (\w*) 更改为 (Hide|Show)。如果引号中的部分是空字符串，此表达式也将起作用，这可能对某些字段值有效。

演示:http://jsfiddle.net/2UFHN/1/

注意:您说的是 _“任意数量的数字和/或字母和/或空格”- 为此您只需要 [\w\s]+。在您的表达式中，您有 (\d*|\w*)\s+，这意味着“零个或多个数字或零个或多个单词字符后跟一个或多个空格”。\w 已经匹配数字(以及 a-z 和下划线)，因此您也不需要\d。

您可能想在您的表达式中添加一个i 标志，如/expressionhere/i 以使其不区分大小写。