如何为不同的可选值添加正则表达式？

我正在处理一个使用regex函数的项目。

以下是我在jsFdle中的代码

My own JsFiddle Code

这里有HTML

<div class="post-body">
  <a href='/'>color=(green) title=(Hello World) caption=(Hello City 2) post=(New)</a>
</div>

和js在这里

    $(".post-body").each(function() {
        var e = $(this),
            t = e.find("a").text();
        if (t) {
            var a = t.match(/title=(([^)]*))s+caption=(([^)]*))/);
            if (a) {
                var s = a[1];
                  
                0 != s && e.find("a").text(s), 0 != i && e.find("a").text(i)
            }
        }
 });

此代码运行良好，但当我放置颜色和POST值时，代码停止工作。

我不知道为什么所有值都不像My World Hello City 2 New那样显示？

下面当我尝试放置值时代码不起作用，我还希望应该有可选的，以便我们可以使用一个值或所有值，如在这种情况下只使用两个值标题和标题，或者我们可以使用所有值，如color=(green) title=(Hello World) caption=(Hello City 2) post=(New)

    $(".post-body").each(function() {
         var e = $(this),
                t = e.find("a").text();
            if (t) {
            var a = t.match(/title=(([^)]*))s+caption=(([^)]*))s+post=(([^)]*))s+color=(([^)]*))s+content=(([^)]*))s+size=(([^)]*))/);
            if (a) {
                var s = a[1],
                    i = a[2];
                    m = a[3];
                    n = a[4];
                    z = a[5];
                    y = a[6];
                0 != s && e.find("a").text(s), 0 != i && e.find("a").text(i), 0 != m && e.find("a").text(m), 0 != n && e.find("a").text(n), 0 != z && e.find("a").text(z), 0 != y && e.find("a").text(y)
            }
        }
 });

在研究中，我发现一个人创建的代码运行良好，也许它有助于解决我的问题

Working JsFiddle Code

但我正在尝试创建自己的正版代码，但它不起作用。我希望在这里我能得到一些解决方案。我们非常感谢任何形式的帮助！

---

解决方案

您可以使用此正则表达式将所有现有字段匹配到您的语法中，如/(?:([a-zA-Z]{3,})+=(([^)]*)))/g所示，并使用matchAll将所有字段放入一个数组中，然后像这样循环遍历该数组，如果您想要在某个位置显示结果：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

$(".post-body").each(function() {
        var e = $(this),
            t = e.find("a").text();
        if (t) {
            var a = [...t.matchAll(/(?:([a-zA-Z]{3,})+=(([^)]*)))/g)];
            if (a) {
                a.map(function(item, key){
                  console.log(item)
                  let k = item[1];
                  let v = item[2];
                  
                  $("#results").append(`<span>${v}</span>`);
                });
            }
        }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-body">
<a href='/'>color=(green) title=(Hello World) caption=(Hello City 2) post=(New) title=(Hello World 3)</a>
</div>
<br />
<div id="results">

</div>