JavaScript

Pure Javascript snippet to find duplicate DOM ids

This entry was posted in JavaScript and tagged dom duplicate id javascript on

Sometimes is necessary to find out duplicate element ids in DOM.
There is a pure javascript snippet to copy paste in you browser console,
which will inform you the number of duplicates and will enumerate them.

/* Find duplicate DOM ids | (c) 2021 - Petros Kyladitis */
let uid = Array() ;
let did = Array() ;
let e = document.querySelectorAll('*[id]') ;
for(i=0; i<e.length; i++){
  if(!uid.includes(e[i].id)){
    uid.push(e[i].id) ;
  }else{
    did.push(e[i].id) ;
  }
}

let msg = "There are " + (did.length>0 ? did.length : "NO") + " duplicate ids in DOM\n" ;
for(j=0; j<did.length; j++){
  msg += "\n" + did[j] ;
}

console.log(msg) ;

SQL syntax highlighter for PrismJS

This entry was posted in JavaScript and tagged highlight javascript script sql on

After the Python highlighter, here is an SQL syntax highligher for PrismJS. Covering over 380 important keywords from the most famous SQL database implementations, such as MySQL, Microsoft SQL Server etc.

SQL Highlighting Sample


//one line comment
/* 
 * multiline 
 * comments
 */
SELECT Book.title 
 FROM Book
 JOIN Book_author ON Book.isbn = Book_author.isbn
 GROUP BY Book.title
HAVING Book.price > 10.4 AND Book_author.name = "Frank"
ORDER BY No_of_Authors ; -- another comment style

 
Until my GitHub fork merged with the original PrismJS project, you can download this add-on and use it with the existing PrismJS script, by putting it after the the prism.min.js script definition and by using the value language-sql at class property of the code element you like to highlight.

Usage

. . .
<script src="prism.min.js"></script>
<script src="prism-sql.min.js"></script>
. . .
<pre><code class="language-sql">
. . .

 
Download Prism SQL Higlighter

Python syntax highlighter for PrismJS

This entry was posted in JavaScript and tagged highlight javascript python script syntax on

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind, developed by Lea Verou.

I recently changed to this highlighter on my website. But except the officialy supported languages I need to use it for highlight a WOL Python script. Thanks to the fact that it is easy extensible, I create some add-on code for Python syntax.

Python Highlighting Sample

# comment
import library
def main(arg=15):
    print("Hello world!") ;

 
Here you can see the source code of the addon.

Add-on source code (minified)

Prism.languages.python={comment:{pattern:/(^|[^\\])#.*?(\r?\n|$)/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,keyword:/\b(as|assert|break|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|pass|print|raise|return|try|while|with|yield)\b/g,boolean:/\b(True|False)\b/g,number:/\b-?(0x)?\d*\.?[\da-f]+\b/g,operator:/[-+]{1,2}|=?&lt;|=?&gt;|!|={1,2}|(&){1,2}|(&amp;){1,2}|\|?\||\?|\*|\/|~|\^|%|\b(or|and|not)\b/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};

 
Until my GitHub fork merged with the original PrismJS project you can use it with the existing PrismJS script, by putting it after the the prism.min.js script definition and by using the value language-python at class property of the code element you like to highlight.

Usage

. . .
<script src="prism.min.js"></script>
<script src="prism-python.min.js"></script>
. . .
<pre><code class="language-python">
. . .

 
Download Prism Python Higlighter

 

Javascript Function: strToPhpChr(str)

This entry was posted in JavaScript and tagged javascript php script on

There are times when converting a string into PHP concatenated chr( ) functions are very useful.
So, here is a simple javascript function, who do the dirty job.

/**
* @author Petros Kyladitis - 2011
* @license MIT License
* @description get PHP concatenated chr( ) functions from a string
* @param str String to be converted
* @return the PHP code
*/
function strToPhpChr(str){
  var strLen = str.length ;
  var phpCharCode = '' ;
  for(i=0; i<strLen; i++){
    phpCharCode +=  'chr(' + str.charCodeAt(i) +  ').' ; 
  } 
  return phpCharCode.substring(0, phpCharCode.length-1) ; 
}

Blink Element’s Border Javascript Function

This entry was posted in JavaScript and tagged blink javascript script on

I need a piece of javascript code to make the border of an element blink infinite.
So I write the next function, that changes element’s border color (using DOM) to 2nd passed color code. Then make infinite recursion calls of this function, after the passing time by using setTimeout("javascript statement",milliseconds); Use anonymous function as statement to setTimeout for passing altered color parameters each time, set 1st color code to 2nd and vice versa. After every recursive call set all params to null preventing memory leaks.


/**
* @author Petros Kyladitis - 2011
* @license MIT License
*
* @description make the border of an element blink
* @param colorA first border's color code
* @param colorB second border's color code
* @param elementId element id
* @param time blinking time in milliseconds
*/

function blinkBorder(colorA, colorB, elementId, time){
  document.getElementById(elementId).style.borderColor = colorB ;
  setTimeout( function(){
    blinkBorder(colorB, colorA, elementId, time);
    colorB = null;
    colorA = null;
    elementId = null;
    time = null;
  } , time) ;
}