<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Soundex Example</h1>
<label for="artists">Artists (separated by comma):</label>
<input type="text" id="artists" style="width: 100%" value="Beyonce, Snoop Dogg, Queen, ABBA, Pharrell, Drake, twenty one pilots, Rihanna, Adele, The Chainsmokers, Ariana Grande, Shawn Mendes, Justin Bieber, Justin Moore, Meghan Trainor, PARTYNEXTDOOR, DJ Khaled, Sia, Blake Shelton, Justin Timberlake, Selena Gomez, Eminem, Major Lazer, Katy Perry, Daya, Rae Sremmurd, Calvin Harris, Charlie Puth, Florida Georgia Line, P!nk, Fifth Harmony, Taylor Swift, Halsey, Kanye West, Luke Bryan, Future, Lukas Graham, Desiigner, Eric Church, Coldplay, Sam Hunt, G-Eazy, The Weeknd, Metallica, Kevin Gates, Young The Giant, Fetty Wap, DJ Snake, Kiiara, Panic! At The Disco, Thomas Rhett, Bryson Tiller, Dierks Bentley, Disturbed, X Ambassadors, Chris Stapleton, Skillet, Flume, DNCE, Jason Aldean, Tory Lanez, Keith Urban, Wiz Khalifa, Kelsea Ballerini, Lil Uzi Vert, Dan + Shay, Michael Jackson, Cole Swindell, Atmosphere, Carrie Underwood, Imagine Dragons, Jon Pardi, OneRepublic, Chris Brown, Prince, The Amity Affliction, Maroon 5, Mike Posner, Zac Brown Band, Jake Owen, Ed Sheeran, Demi Lovato, Britney Spears, Kenny Chesney, Cody Jinks, James Bay, Kent Jones, Sean Paul, Miranda Lambert, The Lumineers, Mario Bautista, Hillary Scott & The Scott Family, Blink-182, Kehlani, D.R.A.M., Red Hot Chili Peppers, Usher, Kidz Bop Kids, Gucci Mane, Dylan Scott, Jacob Sartorius, gnash, Elvis Presley, Green Day"/>
<label for="search-query">Search Query:</label>
<input type="text" id="search-query" style="width: 100%" value="Just"/>
<button onclick="runSearch()">Search</button>
<h2>Matching Artists</h2>
<p id="search-results"></p>
</body>
</html>
function soundex(word) {
// first make it all uppercase
var treatedWord = word.toUpperCase(); // 'PHARRELL'
// Take first letter as our hash prefix
var hash = treatedWord[0]; // 'P'
// step 2. Replace consonants with digits
var lettersToReplaceInOrder = ['BFPV', 'CGJKQSXZ', 'DT', 'L', 'MN', 'R', 'WH', 'AEIOUY'];
lettersToReplaceInOrder.forEach(function(lettersToReplace, index) {
treatedWord = treatedWord.replace(new RegExp("["+ lettersToReplace +"]",'gi'), index + 1);
}); // treatedWord = '7866844'
// update our has
hash += treatedWord; // 'P7866844'
// now we have to remove duplicate numbers
// we split the string into an array and run it through a map function
// the map funtction
hash = hash.split("")
.map(function(number, index, array) {
// if it's not the first letter
// AND the previous character is a vowel
// AND the previous previous character is the same as the current
if (index > 1 && (array[index - 1] === '7' && array[index - 2] === number)) {
// do nothing... this counts as two identical characters next to each other
}
// else if this is the first character
// OR the previous character did not match this character
else if (index === 0 || (array[index - 1] !== number)) {
// then return it
return number;
}
}).join(""); // hash = 'P78684'
// ALMOST THERE!
// Now we just need drop out vowels, non word characters and trim to 4 or less
hash = hash[0] + hash.substring(1).replace(/[78\W]/gi, ""); // 'P64'
hash = hash.substring(0, 4).trim();
// Now we have to make sure the length is 4
// if not then pad it with 0
while (hash.length < 4) {
hash += '0';
}
return hash; // 'P640'
}
function runSearch() {
var artists = document.getElementById('artists').value.split(', ');
// build up map of soundex to artist
var artistMap = artists.reduce(function(obj, artist) {
var key = soundex(artist);
if (!obj[key]) {
obj[key] = [artist];
} else {
obj[key].push(artist);
}
return obj;
}, {});
// get soundex for our search string
var searchQuery = document.getElementById('search-query').value;
var soundexHash = soundex(searchQuery);
// display results
if (artistMap[soundexHash]) {
document.getElementById('search-results').innerText = artistMap[soundexHash].join(', ');
} else {
document.getElementById('search-results').innerText = 'No matches found :(';
}
}
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |