reactcomponent中的regex标签按名称在两个可能的标签中

Question

我需要一个正则表达式来找到<Field ...name="document">或<FieldArray ...name="document">以替换为空字符串。 可以跨多行定义它们。

这不是html或xhtml，它只是包含<Field>和<FieldArray>的文本字符串

字段示例：

      <Field
        component={FormField}
        name="document"
        typeInput="selectAutocomplete"
      />

FieldArray示例：

      <FieldArray
        component={FormField}
        typeInput="selectAutocomplete"
        name="document"
      />

在组件列表中。 例：

      <Field
        name="amount"
        component={FormField}
        label={t('form.amount')}
      />
      <Field
        name="datereception"
        component={FormField}
        label={t('form.datereception')}
      />
      <Field
        component={FormField}
        name="document"
        typeInput="selectAutocomplete"
      />
      <Field
        name="datedeferred"
        component={FormField}
        label={t('form.datedeferred')}
      />

我已经阅读了一些解决方案，例如在从字符串中提取图像src中找到src，但是他的结构与我想要的不同。

Answer 1

不建议使用regex解析[X] HTML 。 如果您有可能使用domparser，我建议您使用它而不是regex。

如果没有其他方法，则可以使用这种方法来查找和替换数据：

<Field(?:Array)?\\b(?=[^\\/>]+name="document")[^>]+\\/>

说明

• 将<Field与可选的“ Array”匹配，并以单词边界<Field(?:Array)?\\b结尾
• 正向前看(?=
• 它断言跟随不是/>并且遇到name =“ document” [^\\/>]+name="document"
• 不匹配>一次或多次[^>]+
• 匹配\\/>

 var str = `<Field name="amount" component={FormField} label={t('form.amount')} /> <Field name="datereception" component={FormField} label={t('form.datereception')} /> <Field component={FormField} name="document" typeInput="selectAutocomplete" /> <Field name="datedeferred" component={FormField} label={t('form.datedeferred')} /> <FieldArray component={FormField} typeInput="selectAutocomplete" name="document" /><FieldArray component={FormField} typeInput="selectAutocomplete" name="document" />` ; str = str.replace(/<Field(?:Array)?\\b(?=[^\\/>]+name="document")[^>]+\\/>/g, ""); console.log(str); 

Answer 2

这是使用实际XML解析并且不使用正则表达式的答案：

 var xml = document.createElement("xml"); xml.innerHTML = ` <Field name="amount" component={FormField} label={t('form.amount')} /> <FieldDistractor component={FormField} name="document" typeInput="selectAutocomplete" /> <Field name="datereception" component={FormField} label={t('form.datereception')} /> <Field component={FormField} name="document" typeInput="selectAutocomplete" /> <Field name="datedeferred" component={FormField} label={t('form.datedeferred')} /> <FieldArray component={FormField} typeInput="selectAutocomplete" name="document" /><FieldArray component={FormField} typeInput="selectAutocomplete" name="document" /> `; var match = xml.querySelectorAll( `field:not([name="document"]), fieldarray:not([name="document"]), :not(field):not(fieldarray)` ); var answer = ""; for (var m=0, ml=match.length; m<ml; m++) { // cloning the node removes children, working around the DOM bug answer += match[m].cloneNode().outerHTML + "\\n"; } console.log(answer); 

在编写此答案时，我在DOM分析器中发现了Firefox（ Mozilla Core错误1426224 ）和Chrome（ Chromium错误796305 ）的错误 ，该错误不允许通过innerHTML创建空元素。 我最初的答案是使用正则表达式对代码进行预处理和后处理以使其正常工作，但是在XML上使用正则表达式太麻烦了，以至于我后来将其更改为仅使用cloneNode()剥离子cloneNode()其隐式deep=false ）。

因此，我们将XML转储到虚拟DOM元素中（不需要将其放置在任何地方），然后运行querySelectorAll()来匹配一些指定您要求的CSS：

• field:not([name="document"]) “字段”元素缺少name="document"属性，或者
• fieldarray:not([name="document"])缺少该属性的“ FieldArray”元素，或者
• :not(field):not(fieldarray)任何其他元素

Answer 3

您可以使用regex解析HTML标记，因为解析标记本身并不特殊，并且首先将其解析为原子操作。

但是，您不能使用正则表达式来超越原子标记。
例如，您找不到平衡标签关闭以匹配打开为
这将对正则表达式功能造成巨大压力。

Dom解析器的作用是使用正则表达式解析标签，然后使用内部
创建树并执行处理指令以进行解释的算法
并重新创建图像。
当然，正则表达式不会这样做。

坚持严格解析标签，包括不可见内容（如脚本），
也不是那么容易。
内容可以隐藏或嵌入标签，当您寻找它们时，您不应
找到他们。

因此，从本质上讲，您必须分析整个 html文件才能找到真正的
标记您的寻找。
有一个通用的正则表达式可以做到这一点，我将不在此介绍。
但是，如果您需要它，请告诉我。

因此，如果您想直接跳入火中而无需解析所有
整个文件的标签，这是要使用的正则表达式。

从本质上讲，它是解析所有标签的版本的简化版本。
这种味道可以找到标记和所需的任何attribute = value ，
并且发现它们乱序 。
它还可以用于在同一标签中查找乱序的多个attr / val。

这是供您使用的：

/<Field(?:Array)?(?=(?:[^>"']|"[^"]*"|'[^']*')*?\sname\s*=\s*(?:(['"])\s*document\s*\1))\s+(?:"[\S\s]*?"|'[\S\s]*?'|[^>]*?)+\/>/

解释/格式化

 < Field                # Field or  FieldArray  tag
 (?: Array )?

 (?=                    # Asserttion (a pseudo atomic group)
      (?: [^>"'] | " [^"]* " | ' [^']* ' )*?
      \s name \s* = \s* 
      (?:
           ( ['"] )               # (1), Quote
           \s* document \s*       # With name = "document"
           \1 
      )
 )
 \s+ 
 (?: " [\S\s]*? " | ' [\S\s]*? ' | [^>]*? )+
 />

运行演示： https : //regex101.com/r/ieEBj8/1