टैग/चर के साथ टेक्स्टटेरा बनाना

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

जो मैं अंततः करना चाहता हूं वह इस स्ट्रिंग को प्रदर्शित करने के तरीके के अंतिम उपयोगकर्ता को नियंत्रण दे रहा है। मैं उन्हें वेरिएबल्स जोड़ना चाहता हूं जहां वे चाहते हैं, साथ ही साथ/else कथन भी जोड़ें।

मैंने selectize और select2 में थोड़ा सा देखा, और वे जो भी मैं ढूंढ रहा हूं उसके सही रास्ते पर प्रतीत होता है, लेकिन वास्तव में मुझे कोई और/कार्यक्षमता की आवश्यकता नहीं है। अतीत में मैंने जो कुछ उपयोग किया है वह Blockly है जिसमें/अन्य तर्क शामिल है, लेकिन यह अंतिम उपयोगकर्ता के लिए थोड़ा जटिल हो सकता है। क्या किसी के पास जावास्क्रिप्ट/jQuery प्लगइन्स/स्क्रिप्ट्स की कोई अन्य सिफारिशें हैं जिनका उपयोग मैं इसे पूरा करने के लिए कर सकता हूं?

Answer 1

मान लें कि आप स्ट्रिंग में महत्वपूर्ण शब्दों को देखने के लिए PHP का उपयोग करते हैं और उन्हें वास्तव में इच्छित सामग्री के साथ प्रतिस्थापित करते हैं!

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

उदाहरण के लिए [ROUND] देखें और इसे अपनी वांछित सामग्री से प्रतिस्थापित करें।

फिर पृष्ठ को फिर से लोड करने के साथ, आपके लिए काम करने के लिए php फ़ाइल को कॉल करने के लिए AJAX का उपयोग करें!

Answer 2

आप अभी भी चयन का उपयोग कर सकते हैं और कुछ अच्छी सीएसएस सुविधाओं को जोड़ सकते हैं। जैसे आप डेटा-वैल्यू सिलेक्टर

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

अन्य टैग्स से टैग्स को अलग करने के लिए उपयोग कर सकते हैं। इसके बाद आप अगर बयान चिह्नित करने के लिए एक के बाद आसन्न भाई सीएसएस चयनकर्ता (http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors) इस्तेमाल कर सकते हैं अगले टैग खोजने के लिए इस

[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 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>