JSFiddle - React, Tailwind, and code Playground

by octavioamu

HTML

<div data-truncatehash="4">0x0a2b3a08d5ab70d2091c985933eed7fab9c67022</div>
<div data-truncatehash="4">1234567891233456789</div>
<div data-truncatehash="3">1234567891233456789asd</div>
<div data-truncatehash="2">1234567891233456789asd</div>
<div data-truncatehash>1234567891233456789asd</div>

JavaScript

( function () {
	this.truncateHash = function () {
  	this.number = null;
    this.content = null;
    
    var defaults = {
    	number: 4,
      content: ''
    }
    
    if (arguments[0] && typeof arguments[0] === "object") {
      this.options = extendDefaults(defaults, arguments[0]);
    }
  }
  
  truncateHash.prototype.truncate = function () {
  	initializeEvents.call(this);
  
  }
  
  function initializeEvents() {
		var elem = document.querySelectorAll('[data-truncatehash]')
    for (var i = 0; i < this.length; ++i) {
      truncateHash(this[i],this[i].dataset.truncatehash)
    }
	}
  
  function truncateHash () {
    this.content =  this.content.substr(0,this.number)+ '\u2026'+ this.content.substr(-this.number)
    this.elem.textContent = this.content
  }
  
  function extendDefaults(source, properties) {
    var property;
    for (property in properties) {
      if (properties.hasOwnProperty(property)) {
        source[property] = properties[property];
      }
    }
    return source;
  }
  
}());

var truncate = new truncateHash()