Remove Non Alphanumeric Characters and Change Case

index.html

<header class="container-fluid text-center">
  <h1>Remove Non Alphanumeric Characters and Change Case</h1>
</header>
<div id="results"></div>

remove-non-alphanumeric-characters-and-change-case.markdown

Remove Non Alphanumeric Characters and Change Case

A Pen by Derek Dhammaloka on CodePen.

License.

script.js

$('#results').html(``);

function removeNonAlphanumericAndChangeCase(str) {
  return str.replace(/[^a-zA-Z0-9]/g,'').toLowerCase();
}

$('#results').append(`Personal Computers becomes ${removeNonAlphanumericAndChangeCase('Personal Computers')} <br>`);
$('#results').append(`Advertise+2 becomes ${removeNonAlphanumericAndChangeCase('Advertise+2')} <br>`);
$('#results').append(`This is a test+2+3 becomes ${removeNonAlphanumericAndChangeCase('This is a test+2+3')} <br>`);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
  font-family: "Roboto", Arial, Verdana, sans-serif;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />