### 使用 JavaScript 正则表达式匹配最后一个 `<mx-form-item>` 标签并在其上方插入内容 为了实现匹配最后一个 `<mx-form-item>` 标签并在其上方插入内容的功能，可以使用正则表达式结合字符串操作来完成。以下是详细的解决方案： #### 1. 匹配最后一个 `<mx-form-item>` 标签的正则表达式 以下正则表达式用于从后向前匹配最后一个 `<mx-form-item>` 开始标签： ```javascript const lastStartTagRegex = /(<mx-form-item\b[^>]*>)(?!.*<mx-form-item\b[^>]*>)/gi; ``` 上述正则表达式的含义如下： - `(<mx-form-item\b[^>]*>)`：捕获 `<mx-form-item>` 开始标签。 - `(?!.*<mx-form-item\b[^>]*>)`：确保当前匹配的 `<mx-form-item>` 是最后一个，通过负向前瞻检查后面是否还有其他 `<mx-form-item>` 标签。 #### 2. 在匹配到的最后一个标签上方插入内容 通过替换操作，在匹配到的最后一个 `<mx-form-item>` 标签前插入指定内容： ```javascript function insertAboveLastMxFormItem(html, contentToInsert) { return html.replace(lastStartTagRegex, (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 Last mx-form-item</p>'; const updatedHtml = insertAboveLastMxFormItem(htmlContent, contentToInsert); console.log(updatedHtml); ``` #### 4. 输出结果 执行上述代码后，`updatedHtml` 的内容如下： ```html <div> <mx-form-item label="Name"> <input type="text" /> </mx-form-item> <p>Inserted Content Above Last mx-form-item</p><mx-form-item label="Email"> <input type="email" /> </mx-form-item> </div> ``` #### 注意事项 - 如果 HTML 结构非常复杂或存在嵌套的 `<mx-form-item>` 标签，简单的正则表达式可能无法满足需求，建议使用 HTML 解析器（如 DOMParser）来解析和操作 HTML 结构[^1]。 - 确保插入的内容是合法的 HTML，以避免破坏原有结构[^2]。 ###