Mixing
How to use regex in jQuery :not() selector
1
I'm trying to match some IDs, but not any id that is a number. For example, I'd like to match #about, but not match #67 or #123.
Here's my jQuery with a bit of regex. I think the regex is correct, but it's not getting parsed correctly as not any href="#<number>"
$('a[href*="#"]:not([href="#"],[href="#d+"])').click(function() {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top -60
}, 1500);
return false;
}
}
});
Is there some way I should be escaping that regex or inserting it as a variable or...?
javascript jquery regex jquery-selectors
asked Nov 20 '18 at 23:41
danzodanzo
71212
add a comment |
1
I'm trying to match some IDs, but not any id that is a number. For example, I'd like to match #about, but not match #67 or #123.
Here's my jQuery with a bit of regex. I think the regex is correct, but it's not getting parsed correctly as not any href="#<number>"
$('a[href*="#"]:not([href="#"],[href="#d+"])').click(function() {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top -60
}, 1500);
return false;
}
}
});
Is there some way I should be escaping that regex or inserting it as a variable or...?
javascript jquery regex jquery-selectors
asked Nov 20 '18 at 23:41
danzodanzo
71212
add a comment |
1
1
1
0
I'm trying to match some IDs, but not any id that is a number. For example, I'd like to match #about, but not match #67 or #123.
Here's my jQuery with a bit of regex. I think the regex is correct, but it's not getting parsed correctly as not any href="#<number>"
$('a[href*="#"]:not([href="#"],[href="#d+"])').click(function() {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top -60
}, 1500);
return false;
}
}
});
Is there some way I should be escaping that regex or inserting it as a variable or...?
javascript jquery regex jquery-selectors
asked Nov 20 '18 at 23:41
danzodanzo
71212
I'm trying to match some IDs, but not any id that is a number. For example, I'd like to match #about, but not match #67 or #123.
Here's my jQuery with a bit of regex. I think the regex is correct, but it's not getting parsed correctly as not any href="#<number>"
$('a[href*="#"]:not([href="#"],[href="#d+"])').click(function() {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top -60
}, 1500);
return false;
}
}
});
Is there some way I should be escaping that regex or inserting it as a variable or...?
javascript jquery regex jquery-selectors
javascript jquery regex jquery-selectors
asked Nov 20 '18 at 23:41
danzodanzo
71212
asked Nov 20 '18 at 23:41
danzodanzo
71212
edited Nov 21 '18 at 22:36
danzo
asked Nov 20 '18 at 23:41
danzodanzo
71212
asked Nov 20 '18 at 23:41
danzodanzo
71212
asked Nov 20 '18 at 23:41
danzodanzo
71212
71212
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
The jquery's selector doesn't support regex but you can use .filter() to filter anchors has specific href attribute using regex.
$('a').filter(function(){
return $(this).attr("href").match(/^#D+$/);
}).css("color", "red");<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">#</a>
<a href="#about">#about</a>
<a href="#67">#67</a>
<a href="#123">#123</a>answered Nov 21 '18 at 7:41
MohammadMohammad
15.6k123461
Thanks @Mohammad, I get the filter part, but I can't figure out how to use the return value as the selector. I updated my code above to show the complete function.
– danzo
Nov 21 '18 at 22:37
@danzo Show relevant part of your html
– Mohammad
Nov 22 '18 at 7:34
This is a single WordPress page with anchor links such as #about and #contact. There are also some tabs on the page that are dynamically generated. Currently there are 3 tabs with IDs #67, #68, and #69, but there may be more in the future. I want the smooth scroll code above to ignore the dynamically generated IDs (i.e. IDs with numbers).
– danzo
Nov 26 '18 at 23:48
@danzo This question is about match#about, but not match#67or#123and i answered to it. Your want (smooth scroll code) is new issue and you should ask new question.
– Mohammad
Nov 27 '18 at 7:38
@ mohammad It's not a new issue. You asked for my relevant HTML. Obviously I'm not going to post an entire page of html, so I just explained the usage.
– danzo
Nov 28 '18 at 23:49
|
show 2 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53403265%2fhow-to-use-regex-in-jquery-not-selector%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
The jquery's selector doesn't support regex but you can use .filter() to filter anchors has specific href attribute using regex.
$('a').filter(function(){
return $(this).attr("href").match(/^#D+$/);
}).css("color", "red");<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">#</a>
<a href="#about">#about</a>
<a href="#67">#67</a>
<a href="#123">#123</a>answered Nov 21 '18 at 7:41
MohammadMohammad
15.6k123461
Thanks @Mohammad, I get the filter part, but I can't figure out how to use the return value as the selector. I updated my code above to show the complete function.
– danzo
Nov 21 '18 at 22:37
@danzo Show relevant part of your html
– Mohammad
Nov 22 '18 at 7:34
This is a single WordPress page with anchor links such as #about and #contact. There are also some tabs on the page that are dynamically generated. Currently there are 3 tabs with IDs #67, #68, and #69, but there may be more in the future. I want the smooth scroll code above to ignore the dynamically generated IDs (i.e. IDs with numbers).
– danzo
Nov 26 '18 at 23:48
@danzo This question is about match#about, but not match#67or#123and i answered to it. Your want (smooth scroll code) is new issue and you should ask new question.
– Mohammad
Nov 27 '18 at 7:38
@ mohammad It's not a new issue. You asked for my relevant HTML. Obviously I'm not going to post an entire page of html, so I just explained the usage.
– danzo
Nov 28 '18 at 23:49
|
show 2 more comments
0
The jquery's selector doesn't support regex but you can use .filter() to filter anchors has specific href attribute using regex.
$('a').filter(function(){
return $(this).attr("href").match(/^#D+$/);
}).css("color", "red");<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">#</a>
<a href="#about">#about</a>
<a href="#67">#67</a>
<a href="#123">#123</a>answered Nov 21 '18 at 7:41
MohammadMohammad
15.6k123461
Thanks @Mohammad, I get the filter part, but I can't figure out how to use the return value as the selector. I updated my code above to show the complete function.
– danzo
Nov 21 '18 at 22:37
@danzo Show relevant part of your html
– Mohammad
Nov 22 '18 at 7:34
This is a single WordPress page with anchor links such as #about and #contact. There are also some tabs on the page that are dynamically generated. Currently there are 3 tabs with IDs #67, #68, and #69, but there may be more in the future. I want the smooth scroll code above to ignore the dynamically generated IDs (i.e. IDs with numbers).
– danzo
Nov 26 '18 at 23:48
@danzo This question is about match#about, but not match#67or#123and i answered to it. Your want (smooth scroll code) is new issue and you should ask new question.
– Mohammad
Nov 27 '18 at 7:38
@ mohammad It's not a new issue. You asked for my relevant HTML. Obviously I'm not going to post an entire page of html, so I just explained the usage.
– danzo
Nov 28 '18 at 23:49
|
show 2 more comments
0
0
0
The jquery's selector doesn't support regex but you can use .filter() to filter anchors has specific href attribute using regex.
$('a').filter(function(){
return $(this).attr("href").match(/^#D+$/);
}).css("color", "red");<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">#</a>
<a href="#about">#about</a>
<a href="#67">#67</a>
<a href="#123">#123</a>answered Nov 21 '18 at 7:41
MohammadMohammad
15.6k123461
The jquery's selector doesn't support regex but you can use .filter() to filter anchors has specific href attribute using regex.
$('a').filter(function(){
return $(this).attr("href").match(/^#D+$/);
}).css("color", "red");<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">#</a>
<a href="#about">#about</a>
<a href="#67">#67</a>
<a href="#123">#123</a>$('a').filter(function(){
return $(this).attr("href").match(/^#D+$/);
}).css("color", "red");<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">#</a>
<a href="#about">#about</a>
<a href="#67">#67</a>
<a href="#123">#123</a>$('a').filter(function(){
return $(this).attr("href").match(/^#D+$/);
}).css("color", "red");<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">#</a>
<a href="#about">#about</a>
<a href="#67">#67</a>
<a href="#123">#123</a>answered Nov 21 '18 at 7:41
MohammadMohammad
15.6k123461
answered Nov 21 '18 at 7:41
MohammadMohammad
15.6k123461
answered Nov 21 '18 at 7:41
MohammadMohammad
15.6k123461
answered Nov 21 '18 at 7:41
MohammadMohammad
15.6k123461
15.6k123461
Thanks @Mohammad, I get the filter part, but I can't figure out how to use the return value as the selector. I updated my code above to show the complete function.
– danzo
Nov 21 '18 at 22:37
@danzo Show relevant part of your html
– Mohammad
Nov 22 '18 at 7:34
This is a single WordPress page with anchor links such as #about and #contact. There are also some tabs on the page that are dynamically generated. Currently there are 3 tabs with IDs #67, #68, and #69, but there may be more in the future. I want the smooth scroll code above to ignore the dynamically generated IDs (i.e. IDs with numbers).
– danzo
Nov 26 '18 at 23:48
@danzo This question is about match#about, but not match#67or#123and i answered to it. Your want (smooth scroll code) is new issue and you should ask new question.
– Mohammad
Nov 27 '18 at 7:38
@ mohammad It's not a new issue. You asked for my relevant HTML. Obviously I'm not going to post an entire page of html, so I just explained the usage.
– danzo
Nov 28 '18 at 23:49
|
show 2 more comments
Thanks @Mohammad, I get the filter part, but I can't figure out how to use the return value as the selector. I updated my code above to show the complete function.
– danzo
Nov 21 '18 at 22:37
@danzo Show relevant part of your html
– Mohammad
Nov 22 '18 at 7:34
This is a single WordPress page with anchor links such as #about and #contact. There are also some tabs on the page that are dynamically generated. Currently there are 3 tabs with IDs #67, #68, and #69, but there may be more in the future. I want the smooth scroll code above to ignore the dynamically generated IDs (i.e. IDs with numbers).
– danzo
Nov 26 '18 at 23:48
@danzo This question is about match#about, but not match#67or#123and i answered to it. Your want (smooth scroll code) is new issue and you should ask new question.
– Mohammad
Nov 27 '18 at 7:38
@ mohammad It's not a new issue. You asked for my relevant HTML. Obviously I'm not going to post an entire page of html, so I just explained the usage.
– danzo
Nov 28 '18 at 23:49
Thanks @Mohammad, I get the filter part, but I can't figure out how to use the return value as the selector. I updated my code above to show the complete function.
– danzo
Nov 21 '18 at 22:37
Thanks @Mohammad, I get the filter part, but I can't figure out how to use the return value as the selector. I updated my code above to show the complete function.
– danzo
Nov 21 '18 at 22:37
@danzo Show relevant part of your html
– Mohammad
Nov 22 '18 at 7:34
@danzo Show relevant part of your html
– Mohammad
Nov 22 '18 at 7:34
This is a single WordPress page with anchor links such as #about and #contact. There are also some tabs on the page that are dynamically generated. Currently there are 3 tabs with IDs #67, #68, and #69, but there may be more in the future. I want the smooth scroll code above to ignore the dynamically generated IDs (i.e. IDs with numbers).
– danzo
Nov 26 '18 at 23:48
This is a single WordPress page with anchor links such as #about and #contact. There are also some tabs on the page that are dynamically generated. Currently there are 3 tabs with IDs #67, #68, and #69, but there may be more in the future. I want the smooth scroll code above to ignore the dynamically generated IDs (i.e. IDs with numbers).
– danzo
Nov 26 '18 at 23:48
@danzo This question is about match
#about, but not match #67 or #123 and i answered to it. Your want (smooth scroll code) is new issue and you should ask new question.– Mohammad
Nov 27 '18 at 7:38
@danzo This question is about match
#about, but not match #67 or #123 and i answered to it. Your want (smooth scroll code) is new issue and you should ask new question.– Mohammad
Nov 27 '18 at 7:38
@ mohammad It's not a new issue. You asked for my relevant HTML. Obviously I'm not going to post an entire page of html, so I just explained the usage.
– danzo
Nov 28 '18 at 23:49
@ mohammad It's not a new issue. You asked for my relevant HTML. Obviously I'm not going to post an entire page of html, so I just explained the usage.
– danzo
Nov 28 '18 at 23:49
|
show 2 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53403265%2fhow-to-use-regex-in-jquery-not-selector%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
