getElementsByName: control by last partial name

Question

I can get div elements by id and using only partial name "first"

html

<div id="first.1.end">first.1.end</div>
<div id="first.2.end">first.2.end</div>
<div id="two.3.end">two.3.end</div>
<div id="first.4.end">first.4.end</div>

js

function getElementsByIdStartsWith(selectorTag, prefix) {
    var items = [];
    var myPosts = document.getElementsByTagName(selectorTag);
    for (var i = 0; i < myPosts.length; i++) {
        if (myPosts[i].id.lastIndexOf(prefix, 0) === 0) {
            items.push(myPosts[i]);
        }
    }
    return items;
}
var postedOnes = getElementsByIdStartsWith("div", "first");
alert(postedOnes.length);

It counts 3 div elements (alert).

But how can I use end-partial name for search? For example using "end"?

see below ans hope that will help you... that is a common function which include combination or all three params.. — Vikash Pandey, Jul 11 '15 at 20:16

fuyushimoya · Accepted Answer · 2015-07-11T20:11:29.207

From MDN Attribute selectors:

[attr^=value] Represents an element with an attribute name of attr and whose value is prefixed by "value".

[attr$=value] Represents an element with an attribute name of attr and whose value is suffixed by "value".

So you can use [id^="first"] to find elements with id start with "first". and use [id$="end"] to find elements end with "end".

Like

// This find all div which id ends with "end".
var divs = document.querySelectorAll('div[id$="end"]');

or use jQuery:

$('div[id$="end"]');

Also, you can combine multiple attribute selectors altogether to find a more specific element:

// As we only use querySelector, it find the first div with id starts with "two" and ends with "end".
var divStartAndEnd = document.querySelector('div[id^="two"][id$="end"]');

See demo on jsfiddle

score 1 · Answer 2 · edited May 23 '17 at 10:28

1

I guess this kind of selection can be possible by using jQuery + regex. Have a look to this

How can I select an element by ID with jQuery using regex?

Might be some what on the line that you want.

edited May 23 '17 at 10:28

Community

1
1

answered Jul 11 '15 at 19:40

sanket joshi

43
4

Vikash Pandey · Answer 3 · 2015-07-11T20:10:43.403

Here I am allowing user to pass all three parameters. suppose user doesn't pass midmatch so it will return only match of first and last.

Below is the working code:

It will return 1 count:

function getElementsByIdStartsWith(selectorTag, firstmatch, midmatch, lastmatch) {
    var items = [];
    var myPosts = document.getElementsByTagName(selectorTag);
    for (var i = 0; i < myPosts.length; i++) {
        var firstmatchIndex = firstmatch?myPosts[i].id.indexOf(firstmatch)>-1?true : false : true;
        var midmatchIndex = midmatch?myPosts[i].id.indexOf(midmatch)>-1?true : false : true;
        var lastmatchIndex = lastmatch?myPosts[i].id.indexOf(lastmatch)>-1?true : false : true;
        if (firstmatchIndex && midmatchIndex && lastmatchIndex  ) {
            items.push(myPosts[i]);
        }
    }
    return items;
}
var postedOnes = getElementsByIdStartsWith("div", "first", "2", "end");
alert(postedOnes.length); // now it will show only one in alert.

It will return 3 count:

function getElementsByIdStartsWith(selectorTag, firstmatch, midmatch, lastmatch) {
    var items = [];
    var myPosts = document.getElementsByTagName(selectorTag);
    for (var i = 0; i < myPosts.length; i++) {
        var firstmatchIndex = firstmatch?myPosts[i].id.indexOf(firstmatch)>-1?true : false : true;
        var midmatchIndex = midmatch?myPosts[i].id.indexOf(midmatch)>-1?true : false : true;
        var lastmatchIndex = lastmatch?myPosts[i].id.indexOf(lastmatch)>-1?true : false : true;
        if (firstmatchIndex && midmatchIndex && lastmatchIndex  ) {
            items.push(myPosts[i]);
        }
    }
    return items;
}
var postedOnes = getElementsByIdStartsWith("div", "first", "", "end");
alert(postedOnes.length); // now it will show only three in alert.

if you don't want to consider any parameter just pass empty string( "" ) while calling the function.

Hope this will help you :)

getElementsByName: control by last partial name

3 Answers3

Linked