HTML, CSS and JavaScript playground

ÙÙŽØ¥ÙØ°ÙŽØ§ Ø¬ÙŽÙ„ÙŽØ³Ù’ØªÙŽ ÙÙÙŠ ÙˆÙŽØ³ÙŽØ·Ù Ø§Ù„ØµÙŽÙ‘Ù„ÙŽØ§Ø©Ù ÙÙŽØ§Ø·Ù’Ù…ÙŽØ¦ÙÙ†ÙŽÙ‘ØŒ ÙˆÙŽØ§ÙÙ’ØªÙŽØ±ÙØ´Ù’ ÙÙŽØ®ÙØ°ÙŽÙƒÙŽ Ø§Ù„Ù’ÙŠÙØ³Ù’Ø±ÙŽÙ‰ Ø«ÙÙ…ÙŽÙ‘ ØªÙŽØ´ÙŽÙ‡ÙŽÙ‘Ø¯Ù’

</textarea>
        </p>
        <p id="posttextareadisplay"></p>
    </form>
    
    <br><br><br><br><br><br>
    
PART 2 <br>           <form name="form1" method="post" action="">
        <p>
            <textarea name="mytxtarea2" id="mytxtarea2" class="ed" rows="4" cols="50">This is a sample textssss
ÙÙŽØ¥ÙØ°ÙŽØ§ Ø¬ÙŽÙ„ÙŽØ³Ù’ØªÙŽ ÙÙÙŠ ÙˆÙŽØ³ÙŽØ·Ù Ø§Ù„ØµÙŽÙ‘Ù„ÙŽØ§Ø©Ù ÙÙŽØ§Ø·Ù’Ù…ÙŽØ¦ÙÙ†ÙŽÙ‘ØŒ ÙˆÙŽØ§ÙÙ’ØªÙŽØ±ÙØ´Ù’ ÙÙŽØ®ÙØ°ÙŽÙƒÙŽ Ø§Ù„Ù’ÙŠÙØ³Ù’Ø±ÙŽÙ‰ Ø«ÙÙ…ÙŽÙ‘ ØªÙŽØ´ÙŽÙ‡ÙŽÙ‘Ø¯Ù’

</textarea>
        </p>
        <p id="posttextareadisplay2"></p>
    </form>
    
        <p>
            <textarea name="mytxtarea" id="mytxtarea" class="ed" rows="4" cols="50">This is a sample textssss

</textarea>
        </p>
        <p id="posttextareadisplay2"></p>
    </form>

$(document).ready(function() {

var gogel = $('#mytxtarea').val();
                $('#posttextareadisplay').html(arabtanpaparaf(gogel));
               
                var gogel2 = $('#mytxtarea2').val();
                $('#posttextareadisplay2').html(arabtanpaparaf(gogel2));
                
                
        $('#mytxtarea').on("input propertychange", function() {
                var gogel = $('#mytxtarea').val();

$('#posttextareadisplay').html(arabtanpaparaf(gogel));
        });
        $('#mytxtarea2').on("input propertychange", function() {
                var gogel2 = $('#mytxtarea2').val();

$('#posttextareadisplay2').html(arabtanpaparaf(gogel2));
        });
})

function arabtanpaparaf(str) {

var str = str.replace("&nbsp;", "");

$format_search = [
                /\n\n{1,}/ig,
                /\n{1,}/ig,
                /(.*?)\001/ig,
                /(.*?)\002/ig,
                /\[arab\](.*?)\[\/arab\]/ig,
                /\[b\](.*?)\[\/b\]/ig,
                /\[i\](.*?)\[\/i\]/ig,
                /\[u\](.*?)\[\/u\]/ig,
                /\[url\](.*?)\[\/url\]/ig,
        ];

$format_replace = [
                '\001',
                '\002',
                '<p class="ENGLISH">$1</p>',
                ' $1',
                '<span class="lbs0">$</span>',
                '<b>$1</b>',
                '<em>$1</em>',
                '<span style="text-decoration: underline;">$1</span>',
                '<a href="$1">$1</a>',
        ];
        
        $arab_format_replace = [
                '\001',
                '\002',
                '<p class="ARAB">$1</p>',
                ' $1',
                '<span class="lbs0">$</span>',
                '<b>$1</b>',
                '<em>$1</em>',
                '<span style="text-decoration: underline;">$1</span>',
                '<a href="$1">$1</a>',
        ];

str = str.replace(/([\u0600-\u06ED]+(?:\s+[\u0600-\u06ED]+)*)/g, '<b>$1</b>');

for (var i = 0; i < $format_search.length; i++) {

var arrText = str.trim().split(/\n\n/);
                var newText = '';
                $.each(arrText, function(i, text) {
                        newText += text.trim() + "\n\n";
                });

var pattern = /([\u0600-\u06ED]+(?:\s+[\u0600-\u06ED]+)*)/g;
                
                
/*
                if (pattern.test(str)) {
                    str = newText.replace($format_search[i], $arab_format_replace[i]);
                } else {
                    str = newText.replace($format_search[i], $format_replace[i]);
                }
*/
                
                str = newText.replace($format_search[i], $format_replace[i]);
                
        }

return str;
}