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