JSFiddle - React, Tailwind, and code Playground

by Graham Fairweather

HTML

<input id="one" type="text" size="50"></input>
<input id="two" type="text" size="50"></input>
<input id="three" type="text" size="50"></input>
<input id="four" type="text" size="50"></input>
<input id="five" type="text" size="50"></input>
<input id="six" type="text" size="50"></input>

JavaScript

// A test string
// RegExp literal which matches http:// or HTTP:// at the beginning of a string
// An unwanted beginning
var test = 'http://google.com',
    beginsHTTP = /^http:\/\//i,
    beginsUnwanted = 'http://',
    temp;

// How to use replace with a RegExp to remove a pattern
temp = test.replace(beginsHTTP, '');
console.log(temp);

// an alternative without RegExp or replace
if (test.toLowerCase().indexOf(beginsUnwanted) === 0) {
    temp = test.slice(beginsUnwanted.length);
} else {
    temp = test;
}

console.log(temp);

// Javascript event delegation set on body
document.body.addEventListener('change', function (evt) {
    // check to see if the event's target matches a specific id
    if (evt.target.id === 'one') {
        // set the target value with the modified value
        evt.target.value = evt.target.value.replace(beginsHTTP, '');
    }
}, false);

// Javascript using onchange property on element
document.getElementById('two').onchange = function () {
    // using this which points to the element
    this.value = this.value.replace(beginsHTTP, '');
};

// Javascript using addEventListener change on element
document.getElementById('three').addEventListener('change', function (evt) {
    // using argument which points to the event
    evt.target.value = evt.target.value.replace(beginsHTTP, '');
}, false);

// If you are already using jQuery in your project.

// jQuery using on change delgation on body
$(document.body).on('change', '#four ', function (evt) {
    evt.target.value = evt.target.value.replace(beginsHTTP, '');
});

// jQuery using on change on element
$('#five').on('change', function (evt) {
    // using argument which points to the event
    evt.target.value = evt.target.value.replace(beginsHTTP, '');
});

// jQuery using change shortcut on element
$('#six').change(function () {
    // using this which points to the element
    this.value = this.value.replace(beginsHTTP, '');
});