Xây dựng textarea với các thẻ/biến

Question

Tôi đang tìm kiếm một cách dễ dàng mà người dùng cuối có thể tạo "mã giả" về cách tạo chuỗi cuối cùng. Tôi nghĩ sẽ dễ dàng hơn nếu tôi đưa ra một ví dụ.

tôi có các biến sau:

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

Trong phần cuối của ứng dụng, tôi làm tất cả theo cách thủ công.

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

Điều tôi muốn làm cuối cùng là kiểm soát người dùng cuối về cách chuỗi này đang được hiển thị. Tôi muốn họ thêm các biến mà họ muốn, cũng như thêm các câu lệnh if/else.

Tôi nhìn một chút vào selectize và select2, và họ dường như được đi đúng hướng của những gì tôi đang tìm kiếm, nhưng không thực sự chứa bất kỳ if/else chức năng tôi cần. Một cái gì đó tôi đã sử dụng trong quá khứ là Blockly mà không chứa nếu logic khác, nhưng điều này có thể là một chút phức tạp cho người dùng cuối. Có ai có bất kỳ khuyến nghị khác của javascript/jQuery plugins/script tôi có thể sử dụng để thực hiện điều này?

Answer 1

Giả sử bạn sử dụng php để tìm các từ khóa trong chuỗi và thay thế chúng bằng những thứ bạn thực sự muốn!

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

Ví dụ tìm [ROUND] và thay thế bằng nội dung bạn muốn.

Sau đó, khi tải lại trang, hãy sử dụng ajax để gọi tệp php để thực hiện công việc cho bạn!

Answer 2

Bạn vẫn có thể sử dụng chọn và thêm một số tính năng css đẹp. Ví dụ. bạn có thể sử dụng công cụ chọn giá trị dữ liệu

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

để phân biệt nếu/else thẻ từ các thẻ khác. Tiếp theo, bạn có thể sử dụng liền kề selector anh chị em css (http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors) để tìm thẻ tiếp theo sau khi một câu lệnh if để đánh dấu này là tốt

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

Hơn nữa bạn cũng có thể phân biệt các biến bằng cách sử dụng kỹ thuật tương tự. Sau đó, một trình phân tích cú pháp có thể phân tích các câu lệnh if/else bằng cách sử dụng regexp hoặc bất kỳ điều gì phù hợp với bạn nhất. sau đó

Ai đó có thể viết một cái gì đó giống như

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

nơi dấu ngoặc chỉ ra "thẻ". Trình phân tích cú pháp của bạn sau đó sẽ đọc các thẻ có trích dẫn "" dưới dạng chuỗi.

Answer 3

Nếu bạn đang tìm kiếm phân tích văn bản phía khách hàng tùy chỉnh, có thể điều này sẽ giúp bạn.

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>