How to accept any characters in between * of an getElementById (stack_ * _overflow)?

Question

I have a page which changes the ID of input fields every time. So for example if I visit the page now, the ID can be "stack_15_overflow" and next time it can be "stack_293_overflow".

I want to use a wildcard value for getElementById, such as "stack_ * _overflow" (where * matches anything), to get that value related to any input field starting and ending with some specific text, no matter what text is in between.

Code:

function HelloId(string){
    var name=string
    document.getElementById('stack_*_overflow').value=name;
}

If you control the HTML use a class and do not do this "weird" selector stuff. Than it is a simple call. — epascarello, Aug 26 '13 at 18:01
read this ,it will help also http://stackoverflow.com/questions/5376431/wildcards-in-jquery-selectors — Charaf JRA, Aug 26 '13 at 18:06

Paul · Answer 1 · 2013-08-26T18:15:13.837

5

var elements = document.querySelectorAll('[id^="stack_"][id$="_overflow"]');

edited Aug 26 '13 at 18:15

answered Aug 26 '13 at 17:59

Paul

139,544
27
275
264

Why `querySelectorAll`? This is getting an element by `id`, which should only return 1 element... – Ian Aug 26 '13 at 18:00
1

@Ian `*` is a wildcard (in the question). This will select many elements with many different ids. – Paul Aug 26 '13 at 18:01
1

@Ian, Well i guess he could have many inputs with different id's following the same pattern. The use of `querySelectorAll` here is more questionnable since the OP uses jQuery already. – plalx Aug 26 '13 at 18:03
`*` is unrelated and wasn't my point. I missed the text "any input field starting and ending with some specific text" which is the important part – Ian Aug 26 '13 at 18:03
@plalx Yeah, I misread and didn't see that part I guess? – Ian Aug 26 '13 at 18:03
2

@plalx He tagged it jquery, but from his code he showed in the question I'm not so sure he is actually using it. That's why I offered this solution. If he is already using jQuery this is clearly not as nice (and not as cross browser) as undefined's answer. – Paul Aug 26 '13 at 18:04
@Paulpro, Yeah I agree that he doesn't seem to be using it. Also I am not sure that it's worth to make a copy of the `NodeList`. It's written on MDN that `querySelectorAll` returns a **non-live** `NodeList`. – plalx Aug 26 '13 at 18:14
@plalx Thanks! I always thought it returned a live list. – Paul Aug 26 '13 at 18:15
@Paulpro Ian planx and everyone thank you a lot! For some reason it works with querySelector and not querySelectorAll. I refer to JQ for any solutions either in JS or JQ. I use tinymce, have my own made file uploader and want to target a specific input to insert image or video link without to interact with tinymce. On insert image dialog, there is a button which opens my file uploader as modal with iframe, after uploading i have a button. Then onclick onclick="parent.helloId(this.form.foo.value); copy the link and paste it in the targeted input field, which make it happen with the above code. – Byzantine Aug 26 '13 at 19:11

score 5 · Answer 2 · answered Aug 26 '13 at 17:59

5

Using jQuery's attribute starts with and attribute ends with selectors:

$("[id^='stack'][id$=overflow]");

Note that these selectors are expensive, specifying type of the element can improve the performance:

$('element').filter("[id^='stack'][id$=overflow]");

answered Aug 26 '13 at 17:59

Ram

143,282
16
168
197

Are you about this "expensiveness"? I'm pretty sure `querySelectorAll` natively supports these attribute selectors, so I don't see why you'd want to force 2 DOM queries by using `.filter()` It would be different for a *custom jQuery selector*. Also, I'm pretty sure the selector is evaluated from right to left, so adding the `element` part doesn't speed anything up, it just filters the result set. I might be wrong about that part though - it might just be when you have a space in the selector, that those parts are evaluated from right to left - but each "group" is evaluated from left to right – Ian Aug 26 '13 at 18:11

score 2 · Answer 3 · answered Aug 26 '13 at 18:04

You can't achieve this by using getElementById. A better solution would be querySelector or querySelectorAll, where you get full support for CSS selectors.

Reference at MDN

You will need 2 of these attribute selectors:

Get elements that start with a specific string

document.querySelector('[id^="stack_"]');

Get elements that contain a specific string

document.querySelector('[id*="stack_"]');

Get elements that ends with a specific string

document.querySelector('[id$="_overflow"]');

By combining ends and starts selectors, you get the following and are able to achieve your desired result:

document.querySelector('[id^="stack_"][id$="_overflow"]');

Happy coding!

score 0 · Answer 4 · answered Aug 26 '13 at 17:59

0

Code:

$("body:regex(id, stack_[0-9]+_overflow)");

using this plugin

answered Aug 26 '13 at 17:59

abc123

17,855
7
52
82

How to accept any characters in between * of an getElementById (stack_ * _overflow)?

4 Answers4