JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<p><input type="text" id="amazon_url" placeholder="Amazon-Link einfĂĽgen..."></p>

<p><input type="text" id="amazon_tagged_url" hidden></p>

CSS

* {
  box-sizing: border-box;
}

input {
  padding: 10px;
  width: 100%;
}

JavaScript

const AmazonLinkGenerator = {
	  amazonTag: 'gms0a-21',
	  inputID: '#amazon_url',
	  resultID: '#amazon_tagged_url',
	  initClass: function() {
	    this.initInput();
	  },
	  initInput: function() {
	    const self = this;
	    $(self.inputID).on('input', function() {
	      var currentValue = $(this).val();

	      if (currentValue.length) {
	        var cleanURL = self.cleanURL(currentValue);
	        $(self.resultID).parent().removeAttr('hidden');
	        $(self.resultID).val(cleanURL);
	      } else {
	        $(self.resultID).parent().attr('hidden', 'hidden');
	      }
	    });
	  },
	  cleanURL: function(url) {
	    var self = this;

	    if (!url.match("(?:[/dp/]|$)([A-Z0-9]{10})")) {
	      return url.split('?')[0] + '?tag=' + self.amazonTag;
	    }

	    url = url.match("(?:[/dp/]|$)([A-Z0-9]{10})");
	    url = "https://www.amazon.de/dp" + url[0];

	    return url + '?tag=' + self.amazonTag;
	  },
	};

	AmazonLinkGenerator.initClass();