تغییر رنگ متن های داخل یک ادیتور یا div

در عکس پست قبلی که کدهارو با یک ادیتور نوشته بودم به این فکر میکردم چقدر قشنگتر میشه اگر موقع انتشار کدها، مثل بعضی از ادیتورها که به متدهای خاص اون زبان برنامه نویسی رنگ میدن ما هم اینکارو کنیم … یه جور تغییر رنگ متن های داخل div …
مثلا متد document یکی از متدهای مخصوص خود جاوا اسکریپت هست که شما نمیتونید در اسم فانکشنهای خودتون و … ازش استفاده کنید.
پس یه متد خاصه … حالا بیایم موقع انتشار کدها بهش یه رنگ خاص هم بدیم …
مثلا یه چیز ساده ای که من نوشتم اینه :


<script>
var str = document.getElementById('changeColor').innerHTML;
var res = str.replace(/function/gi,"<b style='color:orange'>function</b>");
var res1 = res.replace(/var/gi,"<b style='color: #66ff66'>var</b>");
var res2 = res1.replace(/document.getElementById/gi,"<b style='color: #ffff99'>document.getElementById</b>");
var res3 = res2.replace(/innerHTML/gi,"<b style='color: #9999ff'>innerHTML</b>");
var res4 = res3.replace(/script/gi,"<b style='color: #9999ff'>script</b>");
document.getElementById('changeColor').innerHTML = res4;
</script>


قشنگه نه؟
آدم دلش وا میشه :دی
حالا میتونید از همین الگوبرداری کنید و متدهای جدیدتر بهش اضافه کنید و رنگ خاصی براش تعیین کنید …
اینکار با متد replace در جاوا اسکریپت انجام گرفته …
حالا میشه باهاش حتی برای غلط املایی هم ازش استفاده کرد ! مثل خودم که به جای کلمه function اشتباهی نوشته بودم fucntion و جای n و c رو جا به جا زده بودم … حالا چجوری فهمیدم اشتباه زدم؟ چون در این کد هر کلمه به اسم function رو پیدا کنه اون رو به رنگ نارنجی تغییر میده … اما یکی از function هیچ تغییر رنگی نداشت ! به همین دلیل فهمیدم که اشتباه نوشته بودم … واقعا چه تکنولوژی پیشرفت کرده هاااااااااا :دی

پاسخی بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *