JSFiddle - React, Tailwind, and code Playground

by Misiur

HTML

<div id="post_message_2581373">
			
			This is a much simpler method of using y_ini that many people don't know.  This is also my attempt at writing a simpler tutorial than normal.<br>
<br>
<font size="5"><font color="red"><b><u><font color="green">File</font></u></b></font></font><br>
<br>
Assume you want your file to look like this:<br>
<br>
<div style="margin:20px; margin-top:5px">
	<div class="smallfont" style="margin-bottom:2px">Code:</div>
	<pre class="alt2" dir="ltr" style="
		margin: 0px;
		padding: 6px;
		border: 1px solid #C2C2C2;
		width: 800px;
		height: 98px;
		text-align: left;
		overflow: auto">[player_data]
health = 57.0
weapon = 12
ammo = 9
name = Y_Less</pre>
</div>"player_data" is the "tag", and everything else are "key/value pairs", i.e. "key = value".<br>
<br>
<font size="5"><font color="red"><b><u><font color="green">Writing</font></u></b></font></font><br>
<br>
Writing to this type of file is easy:<br>
<br>
<div style="margin:20px; margin-top:5px">
	<div class="smallfont" style="margin-bottom:2px">Code:</div>
	<pre class="alt2" dir="ltr" style="
		margin: 0px;
		padding: 6px;
		border: 1px solid #C2C2C2;
		width: 800px;
		height: 370px;
		text-align: left;
		overflow: auto">SavePlayer(playerid)
{
	// Get the player's name.
	new name[MAX_PLAYER_NAME];
	GetPlayerName(playerid, name, sizeof (name));
	// Get their save location.
	new fileName[MAX_PLAYER_NAME + 10];
	format(fileName, sizeof (fileName), "users\\%s.ini", name);
	// Open the file.
	new INI:ini = INI_Open(fileName);
	// Set the tag.
	INI_SetTag(ini, "player_data");
	// Write out all the bits of data.
	new Float:health;
	GetPlayerHealth(playerid, health);
	INI_WriteFloat(ini, "health", health); // Get their health somehow.
	INI_WriteFloat(ini, "weapon", GetPlayerWeapon(playerid));
	INI_WriteFloat(ini, "ammo", GetPlayerAmmo(playerid));
	INI_WriteFloat(ini, "name", name);
	// Close the file.
	INI_Close(ini);
}</pre>
</div><br>
Now all the data is correctly written to a player's file. ...

JavaScript

var 
    $body = $('body'),
    content = $body.html()
;

//Add code tags
content = content
    .replace(/<div class="smallfont" style="margin-bottom:2px">pawn Code:<\/div>/ig, '[pawn]')
    .replace(/<div class="smallfont" style="margin-bottom:2px">Code:<\/div>/ig, '[code]')
    .replace(/<\/div><\/div><\/pre>/img, '[/pawn]')
    .replace(/<\/pre>(\s*)<\/div>/mig, '[/code]')

    //Replace lists
    .replace(/<(\/?)ul>/ig, '[$1list]')
    .replace(/<li>/ig, '[*]')
    //Remove pres and divs
    .replace(/<(\/?)(pre|div|li|span)[^>]*>/gim, '')
    //Replace links
    .replace(/<a href="([^"]*)"([^>]*)><u>/gi, '[url=$1]')
    .replace(/<\/u><\/a>/gi, '[/url]')
    //Replace headings
    .replace(/<font size="(\d+)"><font color="red"><b><u><font color="green">(.*)<\/font><\/u><\/b><\/font><\/font>/gi, '[size=$1][color=green][b][u]$2[/u][/b][/color][/size]')

    //Styles
    .replace(/<(\/?)(b|u)>/gim, '[$1$2]')
;

//nl2br

var 
    re = /(\[(pawn|code)\])(((?!(\[\/(pawn|code)\]))(.|\n))*)(\[\/(pawn|code)\])/img,
    match
;

while ((match = re.exec(content)) != null) {
    var 
        fullMatch = match[0],
        start = match.index,
        end = start + fullMatch.length,
        snippet = content
            .substring(start, end)  
            .replace(/\t/igm, '    ')
            .replace(/(\[(pawn|code)\])([\s])*/gim, '$1')
            .replace(/\n/igm, '<br>')  
            .replace(/ /gm, '&nbsp;')
    ;

    content = content.replace(fullMatch, snippet);
}

$body.html(content);