### 使用 JavaScript 正则表达式匹配 `<mx-form-item>` 标签并在其上方插入内容 为了实现匹配 `<mx-form-item>` 标签并在其上方插入内容的功能，可以使用正则表达式结合字符串操作来完成。以下是详细的解决方案： #### 1. 匹配 `<mx-form-item>` 标签的正则表达式 以下正则表达式用于匹配 `<mx-form-item>` 开始标签和结束标签： ```javascript const startTagRegex = /<mx-form-item\b[^>]*>/gi; // 匹配开始标签 <mx-form-item ...> const endTagRegex = /<\/mx-form-item>/gi; // 匹配结束标签 </mx-form-item> ``` 上述正则表达式中： - `<mx-form-item\b[^>]*>`：匹配 `<mx-form-item>` 开始标签，并允许标签内包含属性。 - `</mx-form-item>`：匹配 `<mx-form-item>` 的结束标签。 #### 2. 在匹配到的标签上方插入内容 通过替换操作，在匹配到的 `<mx-form-item>` 标签前插入指定内容： ```javascript function insertAboveMxFormItem(html, contentToInsert) { return html.replace(startTagRegex, (match) => { return contentToInsert + match; // 将内容插入到匹配的标签之前 }); } ``` #### 3. 示例代码 以下是一个完整的示例，展示如何在 HTML 字符串中匹配 `<mx-form-item>` 标签并在其上方插入内容： ```javascript const htmlContent = ` <div> <mx-form-item label="Name"> <input type="text" /> </mx-form-item> <mx-form-item label="Email"> <input type="email" /> </mx-form-item> </div> `; const contentToInsert = '<p>Inserted Content Above mx-form-item</p>'; const updatedHtml = insertAboveMxFormItem(htmlContent, contentToInsert); console.log(updatedHtml); ``` #### 4. 输出结果 执行上述代码后，`updatedHtml` 的内容如下： ```html <div> <p>Inserted Content Above mx-form-item</p><mx-form-item label="Name"> <input type="text" /> </mx-form-item> <p>Inserted Content Above mx-form-item</p><mx-form-item label="Email"> <input type="email" /> </mx-form-item> </div> ``` #### 注意事项 - 如果需要处理嵌套的 `<mx-form-item>` 标签，简单的正则表达式可能无法满足需求，建议使用 HTML 解析器（如 DOMParser）来解析和操作 HTML 结构[^1]。 - 确保插入的内容是合法的 HTML，以避免破坏原有结构[^2]。 ###