Question

我正在寻找一种简单的方法，最终用户可以生成关于如何生成最终字符串的“伪代码”。我想如果我举一个例子会更容易。

我有以下变量：

Round
Game
Wins
Losses
Player
Opponent
Rating

在我的应用程序的后端，我是手动完成的。

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)";
}

我最终要做的是控制最终用户如何显示此字符串。我希望他们在他们想要的地方添加变量，以及添加if / else语句。

我看了一下selectize和select2，它们似乎正在寻找我正在寻找的东西，但它并不真正包含我需要的任何if / else功能。我过去使用的是Blockly，其中包含if / else逻辑，但这对最终用户来说可能有点复杂。有没有人有任何其他建议的javascript / jQuery插件/脚本我可以用来完成这个？

Answer 1

您仍然可以使用选择并添加一些不错的CSS功能。例如。你可以使用数据值选择器

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

区分if / else标记与其他标记。接下来，您可以使用相邻的兄弟css选择器（http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors）来查找if语句之后的下一个标记，以便将其标记为

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

此外，您还可以使用相同的技术区分变量。之后，解析器可以使用regexp或任何最适合您的方法解析if / else语句。

然后有人可以写出类似

的内容

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

其中括号表示“标签”。然后，您的解析器应该使用引号“”作为字符串。

Answer 2

假设您使用php查找字符串中的关键字并将其替换为您实际想要的内容！

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

例如，查找[ROUND]并将其替换为您想要的内容。

然后在重新加载页面时，使用ajax调用php文件为你完成工作！

Answer 3

如果您正在寻找自定义客户端解析文本，也许这会对您有所帮助。

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>

使用标签/变量构建textarea

3 个答案: