Convert #hashtags Into Tags – Badge-Tags.js

Badge-Tags.js is an open-source and dependency-free JavaScript library that converts #hashtags into customizable badge tags.

How to use it:

1. Import the Badge-Tags.js into your HTML document.

<link rel="stylesheet" href="src/css/style.css" />
<script src="src/js/main.js"></script>

2. Activate the library on the element containing hashtags.

<div data-badge-tags="active">
  I Love #CSS #Script #Com.
</div>

3. Initialize the Badge Tags and done

const tags = new BadgeTags();

// result
<div data-badge-tags="active">
  <i class="tag" style="background-color: rgb(240, 240, 240); color: grey; border-color: transparent;">CSS</i>
  <i class="tag" style="background-color: rgb(240, 240, 240); color: grey; border-color: transparent;">Script</i>
  <i class="tag" style="background-color: rgb(240, 240, 240); color: grey; border-color: transparent;">Com</i>
</div>

4. Customize the border/text/background colors.

const tags = new BadgeTags({
      textColor: "#fff",
      borderColor: "#222",
      backgroundColor: "#222",
});

5. Assign a click callback function to all badge tags.

const tags = new BadgeTags({
      callback: function hey(event){
        console.log(`${target.event.innerHTML}`);
      };
});

Changelog:

v1.0.2 (07/16/2021)

• Update