使用JavaScript Regex进行条件渲染

时间:2012-08-25 03:26:10

标签: javascript regex sitecore web-forms-for-marketers

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

'if Country equals "United States" then Show'

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

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

我基本上是为if声明写一个解释器;我正在给营销人员一种“编程”形式的方法。 Country是我页面上的下拉列表的名称。 equals是一个条件。 "United States"是下拉列表中的值之一。如果用户在下拉菜单中选择了United States then Show州下拉列表。

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

  • 始终以关键字if
  • 开头
  • 后跟一个或多个空格
  • 后跟任意数量的数字,和/或字母和/或空格
    • 控件的名称可以包含多个带空格和偶数的单词
      • 例如:名字,或地址行1
  • 后跟一个或多个空格
  • 后跟关键字equals
  • 后跟一个或多个空格
  • 后跟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}.*$/;

非常感谢您提供的任何帮助!

2 个答案:

答案 0 :(得分: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

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

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

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

可能想要在您的表达式中添加i标记,如/expressionhere/i中所示,以使其不区分大小写。

答案 1 :(得分:0)

只需使用“;无需逃避它。

此外,您显然是在尝试匹配“未首先匹配equals,因此它不会与您的任何测试用例匹配。”

/^if\s+(\d*|\w*)\s+".*$/.test("if abc \"xyz\"") // ==> true
/^if\s+(\d*|\w*)\s+".*$/.test("if abc equals \"xyz\"") // ==> false
相关问题