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

Question

我正在从事一个使用正则表达式函数的项目。

这是我在 jsFiddle 中的代码

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)
            }
        }
 });

这段代码工作正常，但是当我输入 color 和 post 值时，代码停止工作。

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

在下面，当我尝试输入值时，代码不起作用，我还希望应该有可选的，这样我们就可以使用一个值或所有值，就像只使用两个值一样title 和 caption 在这种情况下，或者我们可以使用所有值，如 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

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

Answer 1

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

$(".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>

Answer 2

哇 - 这是一个艰难的过程！我见证了 @freedomn-m 试图猜测你的意图是什么，以及他花了很多时间写答案并向你解释的方式。如果您提供了明确的 minimal reproducible example，这整个痛苦的事情本可以避免。像 jsfiddle 上的外部片段在这里帮助不大。它们在较小的屏幕（如智能手机）上也无法正常工作，许多 SO 用户喜欢在这些设备上回答问题。

@JoseLora 猜到了你想要什么，点赞并“+1”！

最后整个脚本基本上可以缩短为一行（为了更好的可读性，我在这里将它分成四行）：

document.getElementById("result").textContent=
  [...document.querySelector(".post-body a")
  .textContent.matchAll(/([a-zA-Z]{2,})\s*=\s*\(([^)]*)\)/g)]
  .map(e=>e[2]).join(" - ");

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

<div id="result"></div>

我还稍微更改了正则表达式（删除了一个多余的非捕获组并在 = 之前和之后添加了 \s* 以使其在出现任何空白时更加宽容忽略。

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

How to add regex for different optional values?

javascript

regex

jquery

function

match