Removing Spaces around Special Characters in P5.js

Question

I am using the RiTa library in p5.js to make a "mad lib" out of a poem. To output the characters properly, I used the rita.tokenize function to make each word/character a value in an array. I've then used textWidth() to properly output the characters, adding " " around every array value so that the words don't runtogetherlikethis. However, by doing this I ALSO put extra spaces around commas, periods, question marks, etc., and it looks weird. How do I selectively remove these? I was looking into it in JavaScript but can't find anything for p5.js and RiTa specifically. Is there a way to identify punctuation and then use a boolean statement to correct this? Or do I need to ditch the array and use strings to hard code this? Thanks for help! (Please ignore the bits I've commented out, I'm playing around with some extra text). Claire

//Generative Madlib poetry: Find a prose poetry text from Wikisource and 
//replace all nouns and adjectives with random nouns and adjectives. Try adding a rhymescheme.

var whatupwalt = ("What is it then between us? What is the count of the scores or hundreds of years between us? Whatever it is, it avails not, distance avails not, and place avails not, I too lived, Brooklyn of ample hills was mine, I too walkd the streets of Manhattan island, and bathed in the waters around it.");      
var words = [];
var lexicon;
var wordPosX = 10;
var wordPosY = 25;
var credit = ("- Walt Whitman");
//var click = ("Walt Whitman MadLibs! Click to switch up the poem");


function setup() {
  createCanvas(800,800);
  lexicon = new RiLexicon();


  textSize(20);
  fill(200,0, 20);



  words = RiTa.tokenize(whatupwalt);
  for(var i = 0; i < words.length; i++) {

  text(words[i], wordPosX, wordPosY);
  textWidth(words[i], 10);
  wordPosX += textWidth(words[i]+" ");
  text(credit, 600, 100);

  if(wordPosX > 700){
  wordPosX = 10;
  wordPosY += 20;
    }
  }
}

function mousePressed() {
  madLibs();

  textSize(12);
  textAlign(LEFT, TOP);

function madLibs() {
  var words = "What is " + 
    lexicon.randomWord("nn") + 
    " then between us? What is the " +
    lexicon.randomWord("nn") +
    " of the " + 
    lexicon.randomWord("nn") +
    " or hundreds of " +
    lexicon.randomWord("nn") +  
    " between us? Whatever " +
    lexicon.randomWord("nn") +
    " is, " +
    lexicon.randomWord("nn") +
    " avails not, " +
    lexicon.randomWord("nn") +
    " avails not, and " +
    lexicon.randomWord("nn") + 
    " avails not, I too lived, " +
    lexicon.randomWord("nn") +
    " of " +
    lexicon.randomWord("jj") + " " +
    lexicon.randomWord("nn") + 
    " was mine, I too walkd the " +
     lexicon.randomWord("nn") + 
     " of " +
    lexicon.randomWord("nn") + " " +
    lexicon.randomWord("nn") + 
    " , and bathed in the " +
    lexicon.randomWord("nn") + 
    " around " +
    lexicon.randomWord("nn") + "."


  background(255);
  textSize(20);
  text(words, 10, 10, 800-20, 800-20);
  credit = "-" + " " + lexicon.randomWord("nn") + " " + lexicon.randomWord("jj")
  text(credit, 580, 120);
  //rect(375, 240, 375, 220, 400, 240, 400, 220);
  //text(click, 400, 250)

Answer 1

You could just drop the space when concatenating them using a simple if statement. Something like this:

var wordOne = "one";
var wordTwo = ", three";

var combined;
if(wordTwo.startsWidth(",")){
   combined = wordOne + wordTwo;
}
else{
   combined = wordOne + " " + wordTwo;
}

You could also just use a regular expression and the replace() function to fix your String after you create it:

var wordOne = "one";
var wordTwo = ", three";
combined = wordOne + " " + wordTwo;
combined = combined.replace(/ ,/g, ',');