Skip to content

Instantly share code, notes, and snippets.

@sm3dev

sm3dev/convert-text-multiple-elements-lowercase-no-special-characters-with-javascript-arrays.html

Last active September 7, 2019 01:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sm3dev/205bb96ab9c78d501481e7179350c94c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sm3dev/205bb96ab9c78d501481e7179350c94c to your computer and use it in GitHub Desktop.
Download ZIP
Convert Text in Multiple Elements to an Array to Replace Spaces and Special Characters with Dashes and Make All Letters in the Array Objects (Strings) Lowercase; The Long Way (Without Regular Expressions)
Raw
convert-text-multiple-elements-lowercase-no-special-characters-with-javascript-arrays.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>
Convert Text in Multiple Elements to an Array to Replace Spaces and
SpecialCharacters with Dashes and Make All Letters in the Array Objects
(Strings) Lowercase; The Long Way (Without Regular Expressions)
</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<style>
.result {
background: #00dd0060;
}
</style>
</head>
<body>
<div class="container">
<h3>
Convert Text in Multiple Elements to an Array to Replace Spaces and
Special Characters with Dashes and Make All Letters in the Array Objects
(Strings) Lowercase; The Long Way (Without Regular Expressions)
</h3>
<em
>For adding a bulk list of choices to a Gravity Forms, I needed the
values to have no spaces or special characters that were not a dash or
underscore. This code will be reused as often as I need a list of values
where each item is shown to users as is with all various punctuation but
each item's value used in the code is stripped of "fancy" characters and
uppercase letters</em
>
<br />
<em
>Also, I realized that I can't use <strong>p</strong> tags in this
explanation because I was lazy in my script by calling ALL
<strong>p</strong> tags</em
>
<hr />
<h3>Script Used</h3>
<a href="https://gist.github.com/sm3dev/205bb96ab9c78d501481e7179350c94c" class="button btn btn-light">SM3DEV GIST GITHUB</a>
<h3>List of World Languages from Searchify.ca</h3>
<em
>List was downloaded as a csv. The code to convert a csv into javascript
array looked too complicate. Also, I didn't want to use any third party
software</em
><br /><br />
<em
>I used VS Code extention <strong>Edit csv</strong> to add
<code>< p ></code> and <code>< /p ></code> to the beginning and end of
each language</em
>
<hr />
<div class="row">
<div class="col-md-6 result">
<h3>Result</h3>
<div id="got-em" class=""></div>
</div>
<div class="col-md-6">
<h3>Original List</h3>
<p>Acholi</p>
<p>Afrikaans</p>
<p>Akan</p>
<p>Albanian</p>
<p>Amharic</p>
<p>Arabic</p>
<p>Ashante</p>
<p>Asl</p>
<p>Assyrian</p>
<p>Azerbaijani</p>
<p>Azeri</p>
<p>Bajuni</p>
<p>Basque</p>
<p>Behdini</p>
<p>Belorussian</p>
<p>Bengali</p>
<p>Berber</p>
<p>Bosnian</p>
<p>Bravanese</p>
<p>Bulgarian</p>
<p>Burmese</p>
<p>Cakchiquel</p>
<p>Cambodian</p>
<p>Cantonese</p>
<p>Catalan</p>
<p>Chaldean</p>
<p>Chamorro</p>
<p>Chao-chow</p>
<p>Chavacano</p>
<p>Chin</p>
<p>Chuukese</p>
<p>Cree</p>
<p>Croatian</p>
<p>Czech</p>
<p>Dakota</p>
<p>Danish</p>
<p>Dari</p>
<p>Dinka</p>
<p>Diula</p>
<p>Dutch</p>
<p>Edo</p>
<p>English</p>
<p>Estonian</p>
<p>Ewe</p>
<p>Fante</p>
<p>Farsi</p>
<p>Fijian Hindi</p>
<p>Finnish</p>
<p>Flemish</p>
<p>French</p>
<p>French Canadian</p>
<p>Fukienese</p>
<p>Fula</p>
<p>Fulani</p>
<p>Fuzhou</p>
<p>Ga</p>
<p>Gaddang</p>
<p>Gaelic</p>
<p>Gaelic-irish</p>
<p>Gaelic-scottish</p>
<p>Georgian</p>
<p>German</p>
<p>Gorani</p>
<p>Greek</p>
<p>Gujarati</p>
<p>Haitian Creole</p>
<p>Hakka</p>
<p>Hakka-chinese</p>
<p>Hausa</p>
<p>Hebrew</p>
<p>Hindi</p>
<p>Hmong</p>
<p>Hungarian</p>
<p>Ibanag</p>
<p>Ibo</p>
<p>Icelandic</p>
<p>Igbo</p>
<p>Ilocano</p>
<p>Indonesian</p>
<p>Inuktitut</p>
<p>Italian</p>
<p>Jakartanese</p>
<p>Japanese</p>
<p>Javanese</p>
<p>Kanjobal</p>
<p>Karen</p>
<p>Karenni</p>
<p>Kashmiri</p>
<p>Kazakh</p>
<p>Kikuyu</p>
<p>Kinyarwanda</p>
<p>Kirundi</p>
<p>Korean</p>
<p>Kosovan</p>
<p>Kotokoli</p>
<p>Krio</p>
<p>Kurdish</p>
<p>Kurmanji</p>
<p>Kyrgyz</p>
<p>Lakota</p>
<p>Laotian</p>
<p>Latvian</p>
<p>Lingala</p>
<p>Lithuanian</p>
<p>Luganda</p>
<p>Luo</p>
<p>Maay</p>
<p>Macedonian</p>
<p>Malay</p>
<p>Malayalam</p>
<p>Maltese</p>
<p>Mandarin</p>
<p>Mandingo</p>
<p>Mandinka</p>
<p>Marathi</p>
<p>Marshallese</p>
<p>Mien</p>
<p>Mina</p>
<p>Mirpuri</p>
<p>Mixteco</p>
<p>Moldavan</p>
<p>Mongolian</p>
<p>Montenegrin</p>
<p>Navajo</p>
<p>Neapolitan</p>
<p>Nepali</p>
<p>Nigerian Pidgin</p>
<p>Norwegian</p>
<p>Oromo</p>
<p>Pahari</p>
<p>Papago</p>
<p>Papiamento</p>
<p>Pashto</p>
<p>Patois</p>
<p>Pidgin English</p>
<p>Polish</p>
<p>Portug.creole</p>
<p>Portuguese</p>
<p>Pothwari</p>
<p>Pulaar</p>
<p>Punjabi</p>
<p>Putian</p>
<p>Quichua</p>
<p>Romanian</p>
<p>Russian</p>
<p>Samoan</p>
<p>Serbian</p>
<p>Shanghainese</p>
<p>Shona</p>
<p>Sichuan</p>
<p>Sicilian</p>
<p>Sinhalese</p>
<p>Slovak</p>
<p>Somali</p>
<p>Sorani</p>
<p>Spanish</p>
<p>Sudanese Arabic</p>
<p>Sundanese</p>
<p>Susu</p>
<p>Swahili</p>
<p>Swedish</p>
<p>Sylhetti</p>
<p>Tagalog</p>
<p>Taiwanese</p>
<p>Tajik</p>
<p>Tamil</p>
<p>Telugu</p>
<p>Thai</p>
<p>Tibetan</p>
<p>Tigre</p>
<p>Tigrinya</p>
<p>Toishanese</p>
<p>Tongan</p>
<p>Toucouleur</p>
<p>Trique</p>
<p>Tshiluba</p>
<p>Turkish</p>
<p>Twi</p>
<p>Ukrainian</p>
<p>Urdu</p>
<p>Uyghur</p>
<p>Uzbek</p>
<p>Vietnamese</p>
<p>Visayan</p>
<p>Welsh</p>
<p>Wolof</p>
<p>Yiddish</p>
<p>Yoruba</p>
<p>Yupik</p>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<script>
// Declare two array objects a and b
let a = [];
let b = [];
// Function takes one parameter that will be the array getting looped through
function disp(paragraphs) {
// For each loop of the array "paragraphs", push each string in each paragraphs
// to the array "a" while also making thing string lowercase letters
for (var i = 0; i < paragraphs.length; i++) {
a.push(paragraphs[i].innerHTML.toLowerCase());
// cycle through the array "a" for strings, change any empty space and any "." to a dash
// this new array is saved to array "b"
b = a[i].replace(" ", "-").replace(".", "");
// append each array item to the element with ID #got-em
// this only works because I'm doing it inside the loop
// I couldn't figure out how to make it work outside of the loop
$("#got-em").append(b + `<br>`);
}
}
// Run disp() function with a parameter that puts all paragraph elements into an array
// I could have assigned a variable to the code being used as a parameter but I was just copying from the internet
// and it's easier to plug in any element needed
// Or is it easier???
disp($("p").toArray());
</script>
</body>
</html>
Raw
script-only-convert-text-multiple-elements-lowercase-no-special-characters-with-javascript-arrays.js
// Declare two array objects a and b
let a = [];
let b = [];
// Function takes one parameter that will be the array getting looped through
function disp(paragraphs) {
// For each loop of the array "paragraphs", push each string in each paragraphs
// to the array "a" while also making thing string lowercase letters
for (var i = 0; i < paragraphs.length; i++) {
a.push(paragraphs[i].innerHTML.toLowerCase());
// cycle through the array "a" for strings, change any empty space and any "." to a dash
// this new array is saved to array "b"
b = a[i].replace(" ", "-").replace(".", "");
// append each array item to the element with ID #got-em
// this only works because I'm doing it inside the loop
// I couldn't figure out how to make it work outside of the loop
$("#got-em").append(b + `<br>`);
}
}
// Run disp() function with a parameter that puts all paragraph elements into an array
// I could have assigned a variable to the code being used as a parameter but I was just copying from the internet
// and it's easier to plug in any element needed
// Or is it easier???
disp($("p").toArray());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment