A Pen by David Cochran.

Create-list-of-tag-names-from-classes.markdown

Create list of tag names from classes

replacing "tag-tagname" with "tag name"

A Pen by David Cochran on CodePen.

License.

index.html

<header role="banner">
  <h1>Tags List with jQuery</h1>

</header>

<div id="posts">
  <article class="post tag-a tag-b tag-c">
    <h2>Article</h2>
    <p>CLASSES: post tag-a tag-b tag-c</p>
  </article>
  <article class="post tag-x tag-y tag-z">
    <h2>Article</h2>
    <p>CLASSES: post tag-x tag-y tag-z</p>
  </article>
  <article class="post tag-a tag-z tag-b">
    <h2>Article</h2>
    <p>CLASSES: post tag-a tag-z tag-b</p>
  </article>
  <article class="post tag-z tag-b tag-c">
    <h2>Article</h2>
    <p>CLASSES: post tag-z tag-b tag-c</p>
  </article>
</div>

script.js

var tagNames = {};
$('.post').each(function() {
    $($(this).attr('class').split(' ')).each(function() { 
        if (this !== '') {
            if (this.indexOf("tag-") >= 0) {
                tagName = this;
                tagNames[this] = tagName;
            }
        }    
    });
});

var tagsList = '';
 for (tagName in tagNames) {
   tagsList += '<li>'+tagName.replace('tag-','');+'</li>';
 };

$('header[role="banner"]').append('<div id="tag-name-list"><ul>'+tagsList+'</ul></div>');

style.less

#tag-name-list {
  background-color: yellow;
  &:before  {
    content: 'List of Unique Tag Names (with "tag-" stripped out):';
    // float: left;
  }
}
body { padding: 10px;}

#tag-name-list {
  padding: 8px 0 8px 8px;
  overflow: hidden;
  
  ul { 
   // float: left;
  list-style-type: none; 
  font-size: 0.8em;
  color: #575757;
  // margin: 0;
  // padding: 0;
  
  > li {
    margin-left: 8px;
    // float: left;
  }
}
}
h2 {
  clear: both;
  margin: 16px 0 0 0;
}
p {
  margin: 0;
}