Question

I’m making a js function for a Chrome extension that replaces content in the Facebook newsfeed. Each post has the class uiUnifiedStory uiStreamStory genericStreamStory aid_1719315288 uiListItem uiListLight uiListVerticalItemBorder where aid always changes.

If I want to get all the classes, I can’t just use aid_*.

How can I get all of the li elements that match the class uiUnifiedStory uiStreamStory genericStreamStory aid_* uiListItem uiListLight uiListVerticalItemBorder where aid can be anything.

Answer 1

There are many libraries that allow selection by wildcard, however you can do it manually by:

var elements = document.getElementsByClassName( /* class names other than aid_* ones */
var re = new RegExp('(^|\\s)aid_(\\s|$)'); 
var result = [];

for (var i=0, iLen=elements.length; i<iLen; i++) {
  if (re.test(elements[i].className)) {
    result.push(elements[i]);
  }
}

Note that getElementsByClassName returns a live NodeList, but result will be a native Array (as will whatever is returned by the various library implementations of getElementsByClassName).

You can also use querySelectorAll, which I think is more widely supported than getElementsByClassName.

Edit

So you tried:

  var elements = document.getElementsByClassName('uiUnifiedStory uiStreamStory' +
                 ' genericStreamStory aid_173333252718885 aid_183319479511' +
                 ' uiListItem uiListLight uiListVerticalItemBorder');

  var re = new RegExp('(^|\\s)aid_(\\s|$)');
  var result = [];

  for (var i=0, iLen=elements.length; i<iLen; i++) {

    if (re.test(elements[i].className)) {
      result.push(elements[i]);
      elements.innerHTML = "<h6>benrox!</h6>";

Ooops, elements is a NodeList, assigning to its innerHTML property either does nothing useful or throws an error. Likely you meant to set the property of the current member of the NodeList:

      elements[i].innerHTML = "<h6>benrox!</h6>";
      --------^^^

Note that you can edit your question if you have something to add.