Building textarea with tags/variables


I'm looking for an easy way an end user can generate "pseudo-code" on how to generate a final string. I think it would be easier if I gave an example.

I have the following variables:

  • Round
  • Game
  • Wins
  • Losses
  • Player
  • Opponent
  • Rating

In the back end of my application, I'm doing this all manually.

echo Player + " is currently playing " + Opponent + ". Round: " + Round + ", Game: " + Game;
if ( Wins > Losses ) {
   echo " (Up a Game)";
} else if ( Wins < Losses ) {
   echo " (Down a game)";
}

What I'd like to ultimately do is give control to the end user of how this string is being displayed. I'd like them to add variables where they want, as well as add if/else statements.

I looked a bit into selectize and select2, and they seem to be on the right track of what I'm looking for, but doesn't really contain any if/else functionality I need. Something I have used in the past is Blockly which does contain if/else logic, but this can be a bit complex to the end user. Does anyone have any other recommendations of javascript/jQuery plugins/scripts I can use to accomplish this?

You can still use selectize and add some nice css features. E.g. you could use the data-value selector

[data-value="if"] {
    background-color: red;
}

to distinguish if/else tags from other tags. Next you could use the adjacent sibling css selector (http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors) to find the next tag after an if statement to mark this aswell

[data-value="if"] + div {
    background-color: anything;
}

Moreover you can also distinguish variables using the same technique. Later, a parser could parse the if/else statements using regexp or whatever suits you best.

Someone could then write something like

[Player][" is currently playing "][Opponent][". Round: "][Round]
[", Game: "][Game][if][Wins>Losses][" (Up a Game)"][else][" (Down a game)"]

where the brackets indicate "tags". Your parser then should tread tags with quotations "" as string.


Assuming you use php to look for key words in a string and replace them with the stuff you actually want!

$s="Player is currently playing Opponent [ROUND], Game: Game";
$s = str_replace("[ROUND]", "Round: $Round", $s );

For example look for [ROUND] and replace it with your desired content.

Then with out reloading the page, use ajax to call the php file to do the work for you!


If you are looking for a custom client side parsing of text, maybe this will help you.

var keywords = {
  
  Round: 'red',
  Game: 'green',
  if: 'blue',
  else: 'blue',
  then: 'blue'

}

$('#input').keyup(function(){

  var parsedInputTags = $(this).val().split(/[\[\]]/);
  
  $('#output').html('');
  
  parsedInputTags.forEach(function(text){
  
    if(text in keywords){
    
      $('#output').append('<span data-tag="' + text + '" class="tag-' + keywords[text] + '">' + text + '</span>');
    
    }
    else $('#output').append('<span>' + text + '</span>');
  
  });

});
.tag-red {
  color: red;
}

.tag-green {
  color: green;
}

[data-tag="if"] + span {
  color: cyan;
}

.tag-blue {
  color: blue;
}

textarea {
  width: 200px;
  height: 200px;
}

#output { display: inline-block; vertical-align: top; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="input" placeholder="Type this: This is game [Game] in round [Round]. [if] something > smth [then] type this [else] type that"></textarea>
<div id="output"></div>