正则表达式从 HTML 注释中获取属性，如字符串答案

【问题标题】：Regular Expression to get attributes from HTML comment like string正则表达式从 HTML 注释中获取属性，如字符串
【发布时间】：2021-03-15 19:10:05
【问题描述】：

我有一个字符串，看起来像：

此外，我有许多此类标签的文件，因此我想先找到所有标签，然后逐个解析

示例文件

<head>
   <!--Tag:Test-->
   <!--Tag:Test2 param="abc"-->
   <!--Tag:Test3 param2="abc" param5="xyz"-->
</head>

我正在寻找正则表达式来解析这种脚本并匹配获取名称和属性

我尝试过类似的东西

tempRegex = new RegExp(/<!--Tag:(.*?)\s{1,}(.*?=".*?")-->/, 'i');

`<!--Tag:Test param="abc" param2="xyz"-->`.match(tempRegex);

但它返回匹配组：

0: "<!--Tag:Test param="abc" param2="xyz"-->"
1: "Test"
2: "param="abc" param2="xyz""

我想要实现的是

0: "<!--Tag:Test param="abc" param2="xyz"-->"
1: "Test"
2: param="abc" 
3: param2="xyz"

【问题讨论】：

您已经说明了它的作用。不是问题所在。
这也是评论的原因吗？ <template tag="Name" param="abc" param2="xyz"></template> 使用现有的本机逻辑会更容易处理

标签： javascript regex regex-group

【解决方案1】：

你想提取到一个“键值”的东西吗？

((\w+)[:=]"*(\w+)"*)

应该是：

Tag:Test
param="abc"
param2="xyz"

【讨论】：

是的，我想提取到数组看起来像 [TagName, first pair, second pair, etc]
这会失败，比如

【解决方案2】：

这样就可以了：

/Tag:[a-z]+|[a-z\d]+="[^"]+"/gmi

https://regex101.com/r/6dVJXO/1

var s = `<!--Tag:Name param="abc" param2="xyz"-->`;
var r = /Tag:[a-z]+|[a-z\d]+="[^"]+"/gmi;
console.log([...s.matchAll(r)]);

【讨论】：

看起来不错，但它也匹配<Tag:Name param="abc" param2="xyz"> 另外，如果可能的话，我不推荐使用全局正则表达式，因为首先我需要从文件中获取所有这些匹配的标签，然后逐个解析
@goq123 我看到你已经更新了你的问题以揭示新的要求，所以第一步是对整个字符串运行//g (regex101.com/r/vhl4Ln/1)，循环匹配，然后运行正则表达式我在每场比赛的答案中都提供了。
@goq123 另外，您的问题表明您可以评论块，那么<Tag:Name param="abc" param2="xyz"> 是怎么回事？？
我有严格的规定，我只匹配  有或没有参数我只对这种签名形状感兴趣
@goq123 以供将来参考，使您的问题尽可能完整。您可以轻松地将我向您展示的所有内容组合成适合您的东西。

【解决方案3】：

您可以在https://github.com/artdecocode/rexml 查看源代码，它可以满足您的需求，但您需要提前知道标签的名称，但您可以更改正则表达式。

/**
 * Extract member elements from an XML string. Numbers and booleans will be parsed into their JS types.
 * @param {string|!Array<string>} tag Which tag to extract, e.g., `div`. Can also pass an array of tags, in which case the name of the tag will also be returned.
 * @param {string} string The XML string.
 * @example
 *
 * const xml = `
 * <html>
 *   <div id="1" class="test" contenteditable>
 *     Hello World
 *   </div>
 * </html>
 * `
 * const [{ content, props }] = extractTag('div', xml)
 * // content: Hello World
 * // props: { id: 1, class: 'test', contenteditable: true }
 */
const extractTags = (tag, string) => {
  const tags = Array.isArray(tag) ? tag : [tag]
  const t = tags.join('|')
  const end1 = /\s*\/>/
  const end2 = />([\s\S]+?)?<\/\1>/
  const re = new RegExp(`<(${t})${simple.source}?(?:${end1.source}|${end2.source})`, 'g')

  const matches = mismatch(re, string, ['t', 'a', 'v', 'v1', 'v2', 'c'])
  const res = matches.map(({ 't': tagName, 'a': attributes = '', 'c': content = '' }) => {
    const attrs = attributes.replace(/\/$/, '').trim()
    const props = extractProps(attrs)
    return { content, props, tag: tagName }
  })
  return res
}

【讨论】：