Skip to content
/ general Public

General scripts, snippets, and tools. Files are meant to be lightweight, and able to be used with minimal customizations (if any).

License

CC0-1.0 license
0 stars 1 fork Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

isocialPractice/general

BranchesTags

Repository files navigation

General Purpose Javascript Functions

Table of Contents
  1. Removing Elements
  2. Replacing Elements
  3. Appending/Prepending/Add Elements
  4. Changing Elements
  5. Miscellaneous

Preview JavaScript Functions

General scripts, snippets, and tools. The functions are meant to be lightweight, and able to be used with minimal customizations (if any).

NOTE - the elements in the "support" folder are example purposes.

To Use:

Copy and paste below script tag into the bottom of an HTML page: 

<script src="https://cdn.jsdelivr.net/gh/isocialPractice/general/reusableJavascriptFunctions.js"></script>

Removing Elements 🔝

removeSpace(idWhereSpaceIs, changeCase)
  1. idWhereSpaceIs: String - the element id.
  2. changeCase: String - either "u" (upper) or "l" (lower).

removeSpaceInVariable(variableWhereSpaceIs, changeCase)
  1. variableWhereSpaceIs: variable - the variable with value.
  2. changeCase: String - either "u" (upper) or "l" (lower).

removeWord(word, idWhereWordIs)
  1. word: String - word to remove.
  2. idWhereWordIs: String - the element id.

removeWordInVariable(word, variableWithWord)
  1. word: String - word to remove.
  2. variableWithWord: variable - the variable with value.

removeHTMLTag(tag, parElement, parElementIdentifier, replace)
  1. tag: String or Keyword:
    • a. String - the tag to be removed.
    • b. Keyword - use the keyword "this". Other arugments are then optional.
  2. parElement: String - the parent element by name of id, tag, class, data-attribute, or self.
  3. parElementIdentifier: String - acceptable values are:
    • a. "id" - default
    • b. "tag[indexNumber]" e.g. "tag2" gets the tag at index 2 as if array.
    • c. "class[indexNumber]" e.g. "className1" gets the class at index 1 as if array.
    • d. "data[indexNumber]" e.g. "name0" gets the data-name at index 0 as if array.
    • e. "self" e.g. similar to "id" but focus on one element. IMPORTANT - must have id attribute.
  4. replace: String - either "self" or a tag to replace the removed tag with.
    • NOTE - if value is "self" then the tag and parElement are one in the same, and either the "indexNumber" or "l" is required at end of parElementIdentifier or all matching tags will be removed.
    • NOTE - using the value "l" at end of parElementIdentifier will remove the last element. Use "0" to remove first.

removeNewLines(parElement, parElementIdentifier, removeExcessSpace)
  1. parElement: String - the parent element by name of id, tag, class, or data-attribute.
  2. parElementIdentifier: String - acceptable values are:
    • a. "id" - default
    • b. "tag[indexNumber]" e.g. "tag2" gets the tag at index 2 as if array.
    • c. "class[indexNumber]" e.g. "className1" gets the class at index 1 as if array.
    • d. "data[indexNumber]" e.g. "name0" gets the data-name at index 0 as if array.
  3. removeExcessSpace: Number - default is 0:
    • a. 1 - remove excess
    • b. 0 - do not remove excess space.
      NOTE - excess space is considered more than one space character.

removeLastWord(word, parElement, parElementIdentifier, ignoreCase)
  1. word: String - the word to remove.
  2. parElement: String - the parent element by name of id, tag, class, or data-attribute.
  3. parElementIdentifier: String - acceptable values are:
    • a. "id" - default
    • b. "tag[indexNumber]" e.g. "tag2" gets the tag at index 2 as if array.
    • c. "class[indexNumber]" e.g. "className1" gets the class at index 1 as if array.
    • d. "data[indexNumber]" e.g. "name0" gets the data-name at index 0 as if array.
  4. ignoreCase: Number - default is 0:
    • a. 1 - ignore the case of the word.
    • b. 0 - match exactly (if blank, defaults to this).

removeLastWordInVariable(variableWithWord, word)
  1. variableWithWord: variable - the variable with value.
  2. word: String - the word that will be removed.

removeHTMLAttribute(attribute, parElement, parElementIdentifier)
  1. attribute: String - the attribute that will be removed.
  2. parElement: String - the parent element by name of id, tag, class, or data-attribute.
  3. parElementIdentifier: String - acceptable values are:
    • a. "id" - default
    • b. "tag[indexNumber]" e.g. "tag2" gets the tag at index 2 as if array.
    • c. "class[indexNumber]" e.g. "className1" gets the class at index 1 as if array.
    • d. "data[indexNumber]" e.g. "name0" gets the data-name at index 0 as if array.

Replacing Elements 🔝

replaceWord(word, replaceWith, parElement, parElementIdentifier)
  1. word: String - word to remove.
  2. replaceWith: String - the word the will be inserted in place of word.
  3. parElement: String - the parent element by name of id, tag, class, or data-attribute.
  4. parElementIdentifier: String - acceptable values are:
    • a. "id" - default
    • b. "tag[indexNumber]" e.g. "tag2" gets the tag at index 2 as if array.
    • c. "class[indexNumber]" e.g. "className1" gets the class at index 1 as if array.
    • d. "data[indexNumber]" e.g. "name0" gets the data-name at index 0 as if array.

replaceWordInVariable(word, replaceWith, variableWithWord)
  1. word: String - the word that will be replaced.
  2. replaceWith: String - the word the will be inserted in place of word.
  3. variableWithWord: variable - the variable with value.

replaceInnerHTML(replaceWith, parElement, parElementIdentifier)
  1. replaceWith: String - the word the will be inserted in place of word.
  2. parElement: String - the parent element by name of id, tag, class, data-attribute, or self.
  3. parElementIdentifier: String - acceptable values are:
    • a. "id" - default
    • b. "tag[indexNumber]" e.g. "tag2" gets the tag at index 2 as if array.
    • c. "class[indexNumber]" e.g. "className1" gets the class at index 1 as if array.
    • d. "data[indexNumber]" e.g. "name0" gets the data-name at index 0 as if array.

replaceAttribute(attribute, replaceWith, curElement, curElementIdentifier)
  1. attribute: String - the attribute added or whose value is replace.
  2. replaceWith: String - the attribute value the will be inserted into or in place of prior.
  3. curElement: String - the element by name of id, tag, class, data-attribute, or self.
  4. curElementIdentifier: String - acceptable values are:
    • a. "id" - default
    • b. "tag[indexNumber]" e.g. "tag2" gets the tag at index 2 as if array.
    • c. "class[indexNumber]" e.g. "className1" gets the class at index 1 as if array.
    • d. "data[indexNumber]" e.g. "name0" gets the data-name at index 0 as if array.

replaceNewLines(word, parElement, parElementIdentifier, removeExcessSpace, arrayPrep, mindElement)
  1. word: String - the word that new lines will be replaced with.
  2. parElement: String - the parent element by name of id, tag, class, or data-attribute.
  3. parElementIdentifier: String - acceptable values are:
    • a. "id" - default
    • b. "tag[indexNumber]" e.g. "tag2" gets the tag at index 2 as if array.
    • c. "class[indexNumber]" e.g. "className1" gets the class at index 1 as if array.
    • d. "data[indexNumber]" e.g. "name0" gets the data-name at index 0 as if array.
  4. removeExcessSpace: Number - default is 0:
    • a. 1 - remove excess
    • b. 0 = do not remove excess space.
      NOTE - excess space is considered more than one space character.
  5. arrayPrep: Number - default is 0:
    • a. 1 - output is intended for array
    • b. 0 - output is not intended for array.
      NOTE - prepping for array will remove new lines with no characters, and the first and last replacement words.
  6. mindElement: Number - default is 0:
    • a. 0 - off
    • b. 1 and over - (x) = lines with x number of space characters will be ignored.

Appending/Prepending/Add Elements 🔝

addToAttribute(attribute, addWhat, addWhere, curElement, curElementIdentifier, usingAll)
  1. attribute: String - the attribute name.
  2. addWhat: String - what is added to the attribute.
  3. addWhere: String - "before" or "after".
  4. curElement: String - the element by name of id, tag, class, or data-attribute.
  5. curElementIdentifier: String - acceptable values are:
    • a. "id" - default
    • b. "tag[indexNumber]" e.g. "tag1" gets the tag at index 1 as if array.
      • NOTE - indexNumber is not necessary if usingAll is set to 1.
    • c. "class[indexNumber]" e.g. "className1" gets the class at index 1 as if array.
      • NOTE - indexNumber is not necessary if usingAll is set to 1.
    • d. "data[indexNumber]" e.g. "name1" gets the data-name at index 1 as if array.
      • NOTE - indexNumber is not necessary if usingAll is set to 1.
  6. usingAll: Number - default is 0:
    • a. 0 - for only one attribute
    • b. 1 - all matching attributes.
      NOTE - if set to "0", the curElementIdentifier requires indexNumber appended at end.

addHTMLToText(tag, parElement, parElementIdentifier, attributes, wrapWords)
  1. tag: String - the tag that will wrap the text.
  2. parElement: String - the parent element by name of id, tag, class, or data-attribute.
  3. parElementIdentifier: String - acceptable values are:
    • a. "id" - default
    • b. "tag[indexNumber]" e.g. "tag2" gets the tag at index 2 as if array.
    • c. "class[indexNumber]" e.g. "className1" gets the class at index 1 as if array.
    • d. "data[indexNumber]" e.g. "name0" gets the data-name at index 0 as if array.
  4. attributes: String - the attribute and value respectively, separated with "::".
    NOTE - Currently limited to one attribute. Example values:
    • a. "style::color:blue"
    • b. "class::className row"
  5. wrapWords: String - Finds the matching string in parent element and wraps it with the "tag" argument.

sequentialSectionRomanNumeralItems(parElementIdentifier, parElement, nestedEle)

Function to number specific tags with preceding roman numeral.

  1. parElementIdentifier: String - acceptable values are:
    • a. "id" - the id.
    • b. "tag" - the tag name.
    • c. "class" - the class name.
    • d. "attribute" - as would be used to select CSS attribute or with querySelectorAll() method.
  2. parElement: String - the id, tag, class, or attribute name that will be looped.
  3. nestedEle: String - Two conditions:
    • a. parElementIdentifier = "id" - format as "nested_parElementIdentifier:nested_parElement"
      • Similar to 1. parElementIdentifier but confined to id element selected.
      • Similar to 2. parElement but confined to id element selected.
    • b. parElementIdentifier != "id" - format as "nested_tag"
      • Tags nested in each parElement that will be appeneded with sequential roman numeral.

sequentialSectionOrderedListItems(parElementIdentifier, parElement)

IMPORTANT - best to keep nesting simple. See Issue #1.

Click to See Use Example:

CALLED WITH - sequentialSectionOrderedListItems("tag", "div");

Click to Show HTML 
<div>
 <ol>
  SOME HEADING  
  <li>item</li>
  <li>item
   <ol>
    <li>item</li>
    <li>item</li>
   </ol>
   <li>item</li>
  </li>  
  <li> TERM
  <ol>
   <li>item</li>
   <li>item</li>
  </ol>  
  </li>
 </ol>
</div>

<div> 
 <ol>
  SOME HEADING
  <li>item</li>
  <li>
  item
  <ol>
   <li>item</li>
   <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item
   <ol>
    <li>item</li>
   </ol>
  </li>
  <li>item</li>
 </ol>
</div>
Show Sample Output 
SOME HEADING
1. item
2. item
 2.1.
 item
 2.2.
 item
3. item
4. TERM
 4.1.
 item
 4.2.
 item

SOME HEADING
1. item
2. item
 2.1.
 item
 2.2.
 item
3. item
4. item
 4.1.
 item
5. item

Function to number first ol item and their nested ol items for each parent html element.

  1. parElementIdentifier: String - acceptable values are:
    • a. "id" - the id.
    • b. "tag" - the tag name.
    • c. "class" - the class name.
    • d. "attribute" - as would be used to select CSS attribute or with querySelectorAll() method.
  2. parElement: String - the id, tag, class, or attribute name that will be looped.

Changing Elements 🔝

changeToUpperCase(variableToChange)
  1. variableToChange: variable - the variable with value that will be changed.

changeToLowerCase(variableToChange)
  1. variableToChange: variable - the variable with value that will be changed.

changeToTable(colNumber, colTitles, extractTags, parElement, parElementIdentifier, relocate, relocateElement, relocateElementIdentifier, addHTML)

changeToTable Example:

The changeToTable function example page below. Change To Table Example

changeToTable(colNumber, colTitles, extractTags, parElement, parElementIdentifier, relocate, relocateElement, relocateElementIdentifier, addHTML)

  1. colNumber: Number - the number of columns the table will have.
  2. colTitles: String - the title of table columns. Follows two patterns:
    • a. String - the heading for each column. Separate each heading with a comma.
    • b. Reserved - use either "_href_" or "_:href_"
      • i. _href_ - use with "addHTML" setting last item after "::" character to "td[indexWhereAdded]_:_td[indexWhichIsAdded]".
        • This will change the column name to "Link" and the attribute to "td" at index "indexWhereAdded" to value of "td" at "indexWhichIsAdded".
      • ii. _:href_ - use with "addHTML" setting last item after "::" character to "td[indexWhereAdded]_:_td[indexWhichIsAdded]".
        • This will remove the column at "indexWhichIsAdded", and add the attribute to "td" at index "indexWhereAdded" to value of "td" at "indexWhichIsAdded".
  3. extractTags: String - follows two patterns:
    • a. Tag Name - the tag(s) within the parent element that nests text. Two patterns:
      • i. "span" - for example each span tag is new "td" distributed with rows relative to column number (first parameter).
      • ii. "span: --" - for example each span tag is new "TR" with new "td" before all "--" in tag distributed with rows relative to column number (first parameter).
      • NOTE - Currently only accepts one tag followed by a separator that marks where a column ends for each row.
    • b. Begins with "_" - when using primitive text with no tag pattern begin with "_" character followed by "w". For example:
      • i. _w:n = new lines will mark new HTML table data element.
        • NOTE - this is best for tables that will only have two columns.
      • ii. _w3:n = lines with three words or less will mark new table data, and lines with over three words will mark next table data. New lines mark where data is nested.
      • iii. _s:splitCharacters = characters that mark the end of each data cell.
        • NOTE - this assumes you have put all split characters in the correct position.
  4. parElement: String - the parent element by name of id, tag, class, or data-attribute.
  5. parElementIdentifier: String - acceptable values are:
    • a. "id" - default
    • b. "tag[indexNumber]" e.g. "tag2" gets the tag at index 2 as if array.
    • c. "class[indexNumber]" e.g. "className1" gets the class at index 1 as if array.
    • d. "data[indexNumber]" e.g. "name0" gets the data-name at index 0 as if array.
  6. relocate: Number - default is 0:
    • a. 1 - output to different DOM location
    • b. 0 - for current (overwriting existing).
  7. relocateElement: String - the parent element by name of id, tag, class, or data-attribute.
  8. relocateElementIdentifier: String - acceptable values are:
    • a. "id" - default
    • b. "tag[indexNumber]" e.g. "tag2" relocates to the tag at index 2 as if array.
    • c. "class[indexNumber]" e.g. "className1" relocates to the class at index 1 as if array.
    • d. "data[indexNumber]" e.g. "name0" relocates to the data-name at index 0 as if array.
  9. addHTML: String - following pattern where:
    • a. String - "html element, add items, adding where"
      • A. "a-:-href-:-https ://site.com-:-target-:-_blank-:-rel-:-external::append-:-href-:-anchor-:-innerHTML-:-lc::td0"
        • I. a-:-href-:-https ://site.com-:-target-:-_blank-:-rel-:-external
          • add/wrap "<a>" tag to td (requires second and/or third part)
          • "href" set to "https ://site.com"
          • "target" set to "_blank"
          • "rel" set to "external"
        • II. append-:-href-:-anchor-:-innerHTML-:-lc
          • "appendsed" to "href"
          • "append" as "anchor"
          • "append" td "innerHTML" (requires third part)
          • "append" as "lc" (lowercase)
        • III. td0
          • "td" at index "0" is where html is added (wrap)
          • "td" at index "0" is what value is appended
      • B. "a-:-href-:-append-:-target-:-_blank-:-rel-:-external::td0_:_td2"
        • I. a-:-href-:-append-:-target-:-_blank-:-rel-:-external
          • add/wrap "<a>" tag to td
          • "href" value is "append(ed)" (requires seconde/third part with two parameters
          • "target" set to "_blank"
          • "rel" set to "external"
        • II. td0_:_td2
          • i. td0
            • "td" at index "0" is where html is added (wrap)
          • ii. td2
            • "td" at index "2" is what value appended
          • IMPORTANT - requires value of "_href_" or "_:href_" in one of the "colTitles". e.g. "Term, Definition, _href_".
          • NOTE - the column will be kept if "colTitles" is "_href_". e.g. "Term, Definition, _href_".
          • NOTE - the column will be removed if "colTitles" is "_:href_". e.g. "Term, Definition, _:href_".

NOTE - using only changeToTable() with no arguments will also work, but additionally; NOTE that the parent element with highest length will be converted to table.

changeNextElementDisplay(cur, curEl)
  1. cur: Keyword - use the keyword "this".
  2. curEl: Keyword.property - use the keyword with property "this.nextElementSibling".
onclick="changeNextElementDisplay(this, this.nextElementSibling)"

Miscellaneous 🔝

outputTextFile(textFilePath, parElement, parElementIdentifier, asWhat)
  1. textFilePath: String - path to file that will be output as text.
  2. parElement: String - the parent element by name of id, tag, class, data-attribute, or self.
  3. parElementIdentifier: String - acceptable values are:
    • a. "id" - default
    • b. "tag[indexNumber]" e.g. "tag2" gets the tag at index 2 as if array.
    • c. "class[indexNumber]" e.g. "className1" gets the class at index 1 as if array.
    • d. "data[indexNumber]" e.g. "name0" gets the data-name at index 0 as if array.
  4. asWhat: String - output as either "text" or "html".

copyText(parElement, parElementIdentifier, copyWhat)
  1. parElement: String - the parent element by name of id, tag, class, data-attribute, or self.
  2. parElementIdentifier: String - acceptable values are:
    • a. "id" - use the id attribute name of HTML element.
    • b. "tag[indexNumber]" e.g. "tag2" gets the tag at index 2 as if array.
    • c. "class[indexNumber]" e.g. "className1" gets the class at index 1 as if array.
    • d. "data[indexNumber]" e.g. "name0" gets the data-name at index 0 as if array.
    • e. var - when using a JavaScript variable; not quoted.
  3. copyWhat: String - acceptable values are:
    • a. "text" - default | gets the parent elements "innerText" value.
      • The pasted contents will keep HTML tags intact.
    • b. "html" - gets the parent elements "innerHTML" value.
      • The pasted contents will change HTML tags to HTML entities.

showTermTitleWithLink(cur, curData, curTitle)

showTermTitleWithLink Example:

The showTermTitleWithLink function example page below. Show Term Title With Link Example

showTermTitleWithLink(cur, curData, curTitle)

  1. cur: Required constant argument - this
  2. curData: Required constant argument - this.dataset
  3. curTitle: Required constant argument - this.dataset.title
    • IMPORTANT - Options are controlled with the title attribute.
    • Enter function arguments as noted above, but the title attribute follows this logic (ignore '(I)' and '(i)' marks):
      • A. title = "(I) Definition :: (II) [(i) Alternate text for], [(ii) Source Name] :: (III) [(i) link 1] -:- [(ii) link 2]"
        • I. Definition
          • the definition or hint for the displayed html text. required
        • II. [Alternate text I ], [Alternate text II]
          • i. Alternate text I
            • Alternative text to reference source link (default is "Source Page").
          • ii. Alternate text II
            • Additional alternate text when multiple references and/or links needed.
            • NOTE - Use "[l]" (defaults to first item) to denote which text is nested in link (when one link); and if multiple links leave blank, or denote with: a. "[l]" (matches link order with or without [l]) or b. "[i]" (where i links index in array and can be used with or without [l]). (optional)
        • III. [link 1] -:- [link 2]
          • i. link 1
            • The link that the definition was derived from.
          • ii. link 2
            • The second link that the definition was derived from. Separate with "-:-" if over one. (optional)
              To Use - Paste one of the below examples (as is) into and HTML tag (as attribute), then modify title attribute only: 
onmouseover="showTermTitleWithLink(this, this.dataset, this.dataset.title)" title="Change the definition. ::https://change_source_linke.com"

NOTE - mind indexes if using below example.

onmouseover="showTermTitleWithLink(this, this.dataset, this.dataset.title)" title="Change the definition. :: One[0], two[1]::https://changelink1.com -:- https://changelink2.com"

findArrayMax(arr)
  1. arr: Array Object - required array. Can take nested arrays.

findArrayMin(arr)
  1. arr: Array Object - required array. Can take nested arrays.

toggleButtonSwitch(cur, curRun)
  1. cur: required - set to "this".
  2. curRun: mute - do not set in html attribute. This parameter will be used as such ('(i)' marks indict toggled conditions):
  • data-toggle-x:
    • a(i). data-toggle-x="oneFunction()"
      IMPORTANT - do not add ";" at end for above.
    • b(ii):
   data-toggle-x="(       
    function () {     
     oneAFunction();    
     oneBFucntion();     
    }  
   ) ()"
  • data-toggle-y:
    • a(i). data-toggle-y="twoFunction()"
      IMPORTANT - do not add ";" at end for above.
    • b(ii):
   data-toggle-y="(     
   function () {     
    twoAFunction();    
    twoBFunction();    
   }    
  ) ()"

makeRandomSequence(randomLength, randomData)
  1. randomLength: optional - integer
    • default is 8.
  2. randomData: optional - array
    • default is ["digits", "lowerCaseCharacters", "upperCaseCharacters"]

About

General scripts, snippets, and tools. Files are meant to be lightweight, and able to be used with minimal customizations (if any).

Resources

Readme

License

CC0-1.0 license
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages