javascript - 在两种可能的标签中按名称在 reactcomponent 中使用正则表达式标签

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')}
      />

我读过一些解决方案，比如在 Extract image src from a string但他的结构与我正在寻找的不同。

Answer 1

不建议parse [X]HTML with regex .如果您有可能使用 domparser，我建议您使用它而不是正则表达式。

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

<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);