用标签/变量构建文本区

Building textarea with tags/variables

本文关键字：构建 文本区 变量 标签      更新时间：2023-09-26

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

我有以下变量:

  • 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插件/脚本的建议，我可以用它来完成这个?

您仍然可以使用选择并添加一些不错的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)"]

，其中括号表示"tags"。你的解析器应该处理带有引号"的标签作为字符串。

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

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

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

然后无需重新加载页面，使用ajax调用php文件来为您完成工作!

如果你正在寻找一个自定义的客户端文本解析，也许这将帮助你。

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>

相关文章：