Character space visualizer - javascript
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

We are working on a lot of space delimited files and need an easier way to visualize what's going on with spaces. Here is what we are picturing for a solution. We have a page with a text area on it - with alternative option to upload .txt file. We can copy paste in to it and then it will render out something like this https://www.dropbox.com/s/buqb39twc01cwin/2021-06-14_08-10-38.png?dl=0

then it will be easier to visualize the spaces and string lengths. Maybe it would be nice to wrap the counting so that its easy to see and fit on a page vs having an infinite horizontal scroll.

One tricky note, we need to also be able to see carriage returns. it would be good at the end of a row to show some symbol that makes it obvious that its end of row and has a carriage return vs just the line ending without a return.

Please post solution to repl.it - should work in chrome, should suppose maybe 20+ rows with maybe 500 characters in a row.

awarded to radosinsky
Tags
javascript

Crowdsource coding tasks.

1 Solution

Winning solution

Hello Qdev,

here's my solution to this: https://replit.com/@radosinsky/CharacterSpaceVisualizer

You can upload .txt file or input text into the textarea. New-line characters are highlighted with background color. I was not sure if you also need to highlight the words, let me know if I should add that.

Does this solve your problem?

Feel free to ask if you want to add any features, thanks!

hey this is fantastic. how would i go about setting position 1 to 1 and not zero?
Qdev 4 months ago
I just made an update to start from 1 instead of 0.
radosinsky 4 months ago