使用JavaScript正则表达式进行条件渲染 [英] Conditional Renderings with JavaScript Regex

问题描述

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

I need to match on a string such as this:

'if Country equals "United States" then Show'

我正在使用Sitecore中的营销人员的Webforms"模块. Sitecore是基于.NET的CMS. Webforms for Marketers Modules是一个模块，为非开发人员提供GUI来设计带有文本框，下拉列表，复选框等的表单.我要求仅在用户选择特定表单时在表单上显示特定字段前一个字段中的选项.例如:仅当用户从国家/地区"下拉列表中选择美国"时，才显示国家/地区"下拉列表.问题是，WFFM模块不支持字段的条件渲染，因此我正在尝试使用JavaScript自己实现它.我的想法是这样的:

I'm working with the Webforms for Marketers Module in Sitecore. Sitecore is a .NET based CMS. The Webforms for Marketers Modules is a module that provides a GUI for non-developers to design forms with textboxes, drop-down lists, checkboxes, etc... I have requirements to only show certain fields on the form if the user picked a certain option in a previous field. For example: only show the States drop-down list if the user picked "United States" from the Country drop-down list. The problem is, the WFFM module doesn't support conditional renderings of fields so I'm trying to implement it myself with JavaScript. My idea is this:

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

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

I'm basically writing an interpreter for an if statement; I'm giving the marketers a way to "program" the form. Country is the name of a drop-down list on my page. equals is a condition. "United States" is one of the values in drop-down list. If the user picks United States in the drop-down, then Show the States drop-down list.

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

So the input for the regex test would always follow this format:

• 总是以关键字if
开头
• 后跟1个或多个空格
• 后跟任意数量的数字和/或字母和/或空格
  • 控件的名称可以包含多个带有空格和偶数的单词
    • 例如:名字或地址行1
    • always starts with the keyword if
    • followed by 1 or more white-spaces
    • followed by any number of digits, and/or letters and/or white-spaces
      • The name of controls can contain more than one word with spaces and even numbers
        • For example: First Name, or, Address Line 1
        • 控件的值可以包含一个以上带有空格和偶数的单词

        我有足够的工作量了，但这不是我上面列出的所有要求.此行一直匹配到控件名称后的空白.

        I've got this much that works but it's not all of the requirements I've listed above. This line matches all the way up to the white-space after the control name.

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

        但是当我尝试匹配双引号时，它不起作用；我真的不知道在双引号上进行匹配的语法.我已经尝试了以下所有方法，但都无济于事:

        But when I try to match on the double-quote it doesn't work; I don't really know the syntax for matching on the double-quote. I've tried all of the following, none work:

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

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

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

        您能提供的任何帮助将不胜感激！

        Any help you can provide will be greatly appreciated!

        推荐答案

        我建议这样的表达式:

        /^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).如果引号中的部分是空字符串，则该表达式也可以使用，这对于某些字段值可能是有效的.

        I haven't hardcoded "Hide" and "Show" into the regex - instead it returns whatever string is after "then". I figured that would make it easier to add more operations later. If you want to hardcode these operation names just change the final (\w*) to (Hide|Show). Also this expression will work if the part in quotes is an empty string, which may be valid for some field values.

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

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

        Note: You said _"any number of digits, and/or letters and/or white-spaces" - for that you just need [\w\s]+. In your expressions you had (\d*|\w*)\s+, which means "zero or more digits OR zero or more word characters FOLLOWED BY by one or more spaces". \w already matches digits (as well as a-z and underscore), so you don't need \d as well.

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

        You might want to add an i flag to your expression, as in /expressionhere/i to make it case insensitve.

        这篇关于使用JavaScript正则表达式进行条件渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！