Get Elements By Partial Attribute Value

Question

I've been fiddling with this for several hours and I'm utterly stumped by its behavior. On JSFiddle, it seems to only be returning the values of the href attribute when I want the entire elements, but I can still use getAttribute(attribute) as if it's an element. In the userscript that this is for, it seems to completely break everything after calling the function(hence turning to JSFiddle and having no result to show here).

Why is this happening? How can I accomplish the stated goal?

HTML:

<a name="edit-a" href="http://example.com/edit1">foo</a>
<a name="moo" href="http://example.com/edit2">roo</a>
<a name="edit-b" href="http://example.com/boo">bar</a>

JavaScript function:

function getElementsByPartialValue(searchtext, searchattr, searchtag)
{
  var searchreturn = [];
  var searchreturni = 0;
  var tagmatches = document.getElementsByTagName(searchtag);
  for (var tagmatchesi = 0; tagmatchesi < document.getElementsByTagName(searchtag).length; tagmatchesi++)
  {
    if (tagmatches[tagmatchesi].getAttribute(searchattr).indexOf(searchtext) > -1)
    {
      searchreturn[searchreturni] = tagmatches[tagmatchesi];
      searchreturni++;
    }
  }
  return searchreturn;
}

Checking the result:

alert(getElementsByPartialValue('edit', 'name', 'a')[0]);

Result( https://jsfiddle.net/81s4g42a/3/ ):

http://example.com/edit1

Accessing other attributes( https://jsfiddle.net/81s4g42a/4/ ):

alert(getElementsByPartialValue('edit', 'name', 'a')[0].getAttribute('name'));

Result:

edit-a

Answer 1

Use Attribute-Contains Selector like this:

var tagmatches = document.querySelectorAll(searchtag + "[" + searchattr + " *= '" + searchtext + "']");

 function getElementsByPartialValue(searchtext, searchattr, searchtag) { return document.querySelectorAll(searchtag + "[" + searchattr + " *= '" + searchtext + "']"); } var elems = getElementsByPartialValue("edit", "name", "a"); for(var i = 0; i < elems.length; i++) { elems[i].style.background = "red"; } 

 <a name="edit-a" href="http://example.com/edit1">foo</a> <a name="moo" href="http://example.com/edit2">roo</a> <a name="edit-b" href="http://example.com/boo">bar</a> 

Answer 2

Use .querySelectorAll() , attribute is equal to or begins with followed by "-" selector

 var tagMatches = document.querySelectorAll("a[name|='edit']"); console.log(tagMatches); 

 <a name="edit-a" href="http://example.com/edit1">foo</a> <a name="moo" href="http://example.com/edit2">roo</a> <a name="edit-b" href="http://example.com/boo">bar</a> 

Answer 3

I hate to say this, but it's returning "name", not "href", if you want the url you should return the "href", not the "name"... Check your script and you'll find that you've set the name of the first tag to "edit-a", so when alerting the name of [0] you get "edit-a". If you access [1] you get "edit-b", and if you use 1 instead of 'name' you get " http://example.com/boo ", and it's skipping the second one with "moo" as a name because you're only searching for ones with "edit" in its name, not its href/url.

alert(getElementsByPartialValue('edit', 'name', 'a')[0].getAttribute('href'));

Answer 4

I tested your code sample and find out, your code execute perfectly well. The problem is from the "alert()" function, try using console log, you will see that your code actually works.