I am working on a project where I work with the regex function.
Here is my code in jsFiddle
and the HTML is here
<div class="post-body">
<a href='/'>color=(green) title=(Hello World) caption=(Hello City 2) post=(New)</a>
</div>
and js is here
$(".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)
}
}
});
This code works fine but when I put color and post values then the code stops working.
I don't know why are all values not showing like My World Hello City 2 New?
Here below when I tried to put values then code doesn't work, I also want that there should be optional so that we can use either use one value or all values like just use of two values title and caption in this case, or we can use all values like 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)
}
}
});
On research, I found a code created by someone that works fine maybe it's helpful to fix my problem
But I am trying to create my own genuine code but it's not working. I hope here I will get some solution. Any kind of help is highly appreciated!
You can use this regex to match with all existing fields into your syntax like this /(?:([a-zA-Z]{3,})+=\(([^)]*)\))/g and use matchAll to get all of them into an array and loop through the array like this if you want to show the results somewhere:
$(".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>Wow - that was a difficult process! I whitnessed as @freedomn-m tried to guess what your intentions were and the way he spent a lot of time writing an answer and explaining it to you. This whole painful thing could have been avoided had you provided a clear minimal reproducible example. External snippets like the one on jsfiddle are of little help here. They will not work reasonably on smaller screens either (like on smartphones) and many SO users like answering questions on these devices.
Kudos and "+1" to @JoseLora for guessing what you wanted!
In the end the whole script can essentially be shortened into a one-liner (for better readabilty I split it into four lines here):
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>I also changed the regexp a little bit (removed a superfluous non-capturing group and added \s* before and after the = to make it more tolerant in case of any whitespace that should be ignored.