JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<div id="custom-search-param"></div>

JavaScript

(function($) {
  var cContainer = $('#custom-search-param')
  $(cContainer).append('<input type="text" name="s"><span></span>')

  $('[name=s]').on('input', function() {
    var cUrl = 'https://germanssky.de/search/',
      cValue = $(this).val(),
      cQuery = '?q=' + sReplace(cValue),
      cHighlight = '&highlight=' + sReplace(cValue)
    $(cContainer).find('span').text(cUrl+cQuery+cHighlight);
  })
  
  function sReplace(string) {
    string = string.replace(',', '')
    string = string.replace('!', '')
    string = string.replace('?', '')
    string = string.replace('&', '')
  	string = string.replace(' ', '+')
  	return string;
  }
})(jQuery)