Is there a way to do a wildcard element name match using querySelector or querySelectorAll?
The XML document I'm trying to parse is basically a flat list of properties
Any solution except going back to using the apparently deprecated XPath (IE9 dropped it) is acceptable.
[id^='someId'] will match all ids starting with someId.
[id$='someId'] will match all ids ending with someId.
[id*='someId'] will match all ids containing someId.
If you're looking for the name attribute just substitute id with name.
If you're talking about the tag name of the element I don't believe there is a way using querySelector
I was messing/musing on one-liners involving querySelector() & ended up here, & have a possible answer to the OP question using tag names & querySelector(), with credits to @JaredMcAteer for answering MY question, aka have RegEx-like matches with querySelector() in vanilla Javascript
Hoping the following will be useful & fit the OP's needs or everyone else's:
// basically, of before:
var youtubeDiv = document.querySelector('iframe[src="http://www.youtube.com/embed/Jk5lTqQzoKA"]')
// after
var youtubeDiv = document.querySelector('iframe[src^="http://www.youtube.com"]');
// or even, for my needs
var youtubeDiv = document.querySelector('iframe[src*="youtube"]');
Then, we can, for example, get the src stuff, etc ...
console.log(youtubeDiv.src);
//> "http://www.youtube.com/embed/Jk5lTqQzoKA"
console.debug(youtubeDiv);
//> (...)
I liked many of the answers above, but I prefer my queries run only on classes/IDs so they don't have to iterate over every element. This is a combination of code from both @bigiCrab and @JaredMcAteer
// class exactly matches abc
const exactAbc = document.querySelectorAll("[class='abc']")
// class begins with abc
const startsAbc = document.querySelectorAll("[class^='abc']")
// class contains abc
const containsAbc = document.querySelectorAll("[class*='abc']")
// class contains white-space separated word exactly matching abc
const wordAbc = document.querySelectorAll("[class~='abc']")
// class ends with abc
const endsAbc = document.querySelectorAll("[class$='abc']")
Substitute "class" with "id" or "href" to get other matches. Read the article linked below for further examples.
Reference:
Set the tagName as an explicit attribute:
for(var i=0,els=document.querySelectorAll('*'); i<els.length;
els[i].setAttribute('tagName',els[i++].tagName) );
I needed this myself, for an XML Document, with Nested Tags ending in _Sequence. See JaredMcAteer answer for more details.
document.querySelectorAll('[tagName$="_Sequence"]')
I didn't say it would be pretty :)
PS: I would recommend to use tag_name over tagName, so you do not run into interferences when reading 'computer generated', implicit DOM attributes.
I just wrote this short script; seems to work.
/**
* Find all the elements with a tagName that matches.
* @param {RegExp} regEx regular expression to match against tagName
* @returns {Array} elements in the DOM that match
*/
function getAllTagMatches(regEx) {
return Array.prototype.slice.call(document.querySelectorAll('*')).filter(function (el) {
return el.tagName.match(regEx);
});
}
getAllTagMatches(/^di/i); // Returns an array of all elements that begin with "di", eg "div"
i'm looking for regex + not + multiClass selector, and this is what I got.
Hope this help someone looking for same thing!
// contain abc class
"div[class*='abc']"
// contain exact abc class
"div[class~='abc']"
// contain exact abc & def(case-insensitively)
"div[class~='abc'][class*='DeF'i]"
// contain exact abc but not def(case-insensitively)
"div[class~='abc']:not([class*='DeF'i])"
css selector doc: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
simple test: https://codepen.io/BIgiCrab/pen/BadjbZe
For example, there is a form as shown below:
<form id="my-form" method="post">
<input type="text" name="my-first-name" value="John">
<input type="text" name="my last name" value="Smith">
</form>
Then, you can use these selectors below according to 6.1. Attribute presence and value selectors and 6.2. Substring matching attribute selectors.
input[name] selects all <input>s which have name attribute:
document.querySelectorAll('input[name]');
// "my-first-name" and "my last name"
input[name="my last name"] selects all <input>s whose name attribute is exactly my last name:
document.querySelectorAll('input[name="my last name"]');
// "my last name"
input[name~="name"] selects all <input>s whose name attribute's whitespace-separated words contain my last name:
document.querySelectorAll('input[name~="name"]');
// "my last name"
input[name|="my"] selects all <input>s whose name attribute starts from my with - so my-:
document.querySelectorAll('input[name|="my"]');
// "my-first-name"
input[name|="my last name"] selects all <input>s whose name attribute is exactly my last name:
document.querySelectorAll('input[name|="my last name"]');
// "my last name"
input[name^="my "] selects all <input>s whose name attribute starts from my :
document.querySelectorAll('input[name^="my "]');
// "my last name"
input[name$="ame"] selects all <input>s whose name attribute ends with ame:
document.querySelectorAll('input[name$="ame"]');
// "my-first-name" and "my last name"
input[name*="st-"] selects all <input>s whose name attribute contains st-:
document.querySelectorAll('input[name*="st-"]');
// "my-first-name"
In addition, input:not([name="my last name"]) selects all <input>s whose name attribute doesn't contain my last name according to 4.3. The Negation (Matches-None) Pseudo-class: ':not()':
document.querySelectorAll('input:not([name="my last name"])');
// "my-first-name"
And, you can put form#my-form in front of input[name^="my"] to select <input>s more specifically like logical AND (&&) as shown below:
document.querySelectorAll('form#my-form input[name^="my"]');
// "my-first-name" and "my last name"
And, you can also do input:not([name^="last"]):not([name*="st"][value="Smith"]) to select <input>s more specifically like logical AND (&&) as shown below:
document.querySelectorAll('input:not([name^="my-"]):not([name*="st"][value="John"])');
// "my last name"
And, you can also do input[name*="first"], input[name="my last name"] to select <input>s more specifically like logical OR (||) as shown below:
document.querySelectorAll('input[name*="first"], input[name="my last name"]')
// "my-first-name" and "my last name"
There is a way by saying what is is not. Just make the not something it never will be. A good css selector reference: https://www.w3schools.com/cssref/css_selectors.asp which shows the :not selector as follows:
:not(selector) :not(p) Selects every element that is not a <p> element
Here is an example: a div followed by something (anything but a z tag)
div > :not(z){
border:1px solid pink;
}
