main_hero_img
posted: March 08, 2022 edited: March 08, 2022

StringZ - the all in UI string manipulator

stringsdeveloperdatawranglingcoding

Basics

Here's a link to the tool itself: stringZ

If you navigate to the page you'll find at the top in orange the name of the current string transform sequence. If it has not yet been specified it will be Untitled and you can click and edit it as you would a normal textfield. In the image below the name of this particular sequence is "list to js array". Below the transform title are the input text field on the left and the ouput text field on the right. You can directly enter text into the input field or you can use the upload button to upload a text file to have its contents appear in the input text field. The clear button clears the input text field. Any changes you make to the input will immediately be passed through the transform sequence and be displayed to the right in the output text field. Above the output text field is the copy button that when clicked will copy the entire contents of the output field to the clipboard. Alternatively you can press the download button to download the contents of the output text field to a new text file. Both fields have text above them that indicate the number of characters they contain and the number of lines they contain. The output field also shows the change in characters relative to the input field in parenthesis. 

Below the two text fields you will find the transform sequence consisting of transforms that take the input text and convert it to the output text. The sequence is executed left to right such that the output of one transform is fed into the input of the adjacent transform to its right. Below is an example sequence. 

Each transform will appear as a small rectangle with its name and a checbox indicating whether or not it is currently on. Click any transform to access its options which will appear below in the edit panel. The active transform being edited will appear blue as can be seen in the last "add" transform is in the image above. To add a new transform to the end of the sequqence simply select one from the + new transform dropdown menu. To delete a transform hover over it and a small x will appear in the upper right hand corner that if clicked will remove the transform. You can drag and drop ny transform to change its position in the seequence. The clear button will remove all transforms from the current sequence. Any changes you make to the transform sequence will be saved in the page URL. This means that if you bookmark the page while it contains a particular sequence, that bookmark will perserve that sequence (and all the specified options). 

Smart expressions

The program also supports a series of so called smart expressions that are small commands that can be embedded within strings and will be transformed into text by the program. An exmple of a smart expression is {color} which will be converted to a random rgb color (100, 201, 80) in the output. A list of all possble smart expressions can be accessed by clicking the small orange "{}" button on the bottom right of the page. 

Transforms

Add: The add transform allows you to add new text onto a string. The text can be added before or after the entire string. If the "relative to" field is populated however, the text will be added either before or after a substring contained within the main string. As an example in the string "I thinks dogs are cute" if I specify "dogs" in the relative to field and want to insert the text "all", "all" wil be inserted before or after the word "dogs". If the word dogs appears multiple times, I can select which occurence I want to insert before or after by using the number field. By default it is 1, ie the first instance. 

Change Case: The change case transform allows you to change the case of the letters in a string. The options are all lower case, all upper case, title case, and random case. 

Encode: The encode transform allows you to convert a string into a different encoding. The options are URL, binary, HTML, and the MD5 hash. 

Join: The join transform works in conjunction with the split transform. While the split transform splits one string to many, the join does the inverse and joins together an array of many strings into a single string. You can secifiy what string you want to put between the joined pieces in the "join" field. 

Filter: This transform is designed to work on an array of strings as would be produced by the split transform. It will take the array of strings and only pass through the strings that meet the criteria specified in the options. You can filter by length of the overall string, if the string contains or begins or ends with a string, remove duplicates and or empty strings. You can also specify a starting offset of the array and take every nth occurence of the array. As an example with offset 0 and an "every nth" of 4, only the entries 0, 5, 9, and 13 would be pass through the filter to the next transform. 

Remove: The remove transform allows you to remove classes of characters from one or more strings. You can remove all whitespace characters, all numbers, all letters, and all symbols. 

Repeat: The repeat transform allows you to repeat a string n times. 

Replace: The replace transform allows you to find a string within a string and replace it with a new string. You can directly replace all occurences of the find string, all text between the find string, all text before the first find string, or all text afte the last find string. 

Reverse: The reverse transform allows you to reverse the order of chracters within a string. 

Sort: This transform is designed to work on an array of strings as would be produced by the split transform. It will take the array of strings and sort them by the specified criteria. You can sort by alphabetical order, numerical order, lenght of the strings, or shuffle the order randomly. 

Split: This transform takes every string and splits it into an array of strings either by splitting the string by a specific split string or by length. If the input to split is an array of strings, it will split each of the strings in the array to form a nested array. 

Substring: This transform allows you to select a sub portion of string. In index mode you can select a substring by specifying the start and end indices relative to either the beginning or end of the string. In search mode, you can select the substring that is after the first occurence of start string and before the last occurence of end string ie flanked by those two strings. 

Obviously this is a lot to take in, but hopefully this has served as a helpful guide. If this is still somewhat confusing than I recommend you just go to the tool and start playing with it to learn the behavior!