Ti Vídeo Tutoriais: Colorindo um código fonte em uma DIV editável

domingo, 3 de janeiro de 2016

Colorindo um código fonte em uma DIV editável - javaScript

A função replaceColor faz o trabalho.
Ela é responsável por encontrar as palavras reservadas que queremos colorir no código fonte.
O problema é que não existe regex para javascript que permita lookbehind.
Então, criei a função abaixo para ajudar a contornar este problema:

 // blue[i] é a string reservada que iremos procurar
 var bb = new RegExp("([^\s\.\t\n])?("+blue[i]+")(?![a-z])", "gim");
 string = string.replace(bb, function($0,$1){ return $1?$0:"<span style='color:blue'>"+$0+"</span>" ;})

Antenção: Cuidado com os <br> colocados para facilitar a postagem

<br />
<script>
//========================================================================================
// Autor: Luiz Augusto S. Prado - 2015
// Site: www.codigorapido.com.br
// javaScript: Colorindo um código fonte em uma DIV editável - javaScript
//========================================================================================

Selector = function()
        { 
            if (window.getSelection) 
            {
                return window.getSelection();
            }

else if (document.getSelection)
            {
                return document.getSelection();
            }  
        }

createRange = function (cell)
        {
            var rng=null;
            if(cell.createRange) 
            {
                rng=cell.createRange();
            } 
            else if(cell.getRangeAt) 
            {
                rng=cell.getRangeAt(0);
                if(rng.toString()=="") rng=null;
            }
            return rng;
        }

getTextNodesIn = function (node) 
        {  
            var textNodes = [];
            if (node!=undefined && node.nodeType !=undefined && node.nodeType == Node.TEXT_NODE ) 
            {
                textNodes.push(node); 
            }
            else 
            {
                var children = node.childNodes;
                for (var i = 0, len = children.length; i < len; ++i) 
                {
                    textNodes = textNodes.concat( getTextNodesIn(children[i]) );
                }
            }

return textNodes;
        }

getCursorPosition = function (div) 
        { 
            var se = Selector ();  
            var range = se.getRangeAt(0);   
            textNodes = getTextNodesIn(div);
            countChar=0;
            for (var i = 0; i<textNodes.length; i++ ) 
            { 
                if ( range.startContainer==textNodes[i] ) 
                {
                    return countChar+range.startOffset 
                }  
                countChar += textNodes[i].textContent.length
            } 
            return null;
        }

getStartContainer = function (div) 
        {
            var se = Selector ();
            var range = se.getRangeAt(0);   
            textNodes = getTextNodesIn(div); 
            return range.startContainer;
        }

getSelectionPosition = function (div) 
        { 
            var se = Selector ();  
            var range = se.getRangeAt(0);   
            textNodes = getTextNodesIn(div); 
            endCharCount = 0;
            Int=null
            end=null
            for (var i = 0; i<textNodes.length; i++ ) 
            { 
                if ( range.startContainer==textNodes[i] ) 
                {
                    Int = endCharCount+range.startOffset
                }

if ( range.endContainer==textNodes[i] ) 
                {
                    end = endCharCount+range.endOffset
                    break;
                } 
                endCharCount += textNodes[i].textContent.length
            }  
            return [Int, end];
        }

setSelectionPosition = function (div, start, end) 
        {
            range = createRange(document);
            range.selectNodeContents(div);
            var foundStart = false;
            var charCount=0;
            textNodes = getTextNodesIn(div);
            var aa=0
            var bb=0
            for (var i = 0; i<textNodes.length; i++ ) 
            {   
                velhoCount = charCount;
                charCount += textNodes[i].textContent.length 
                if (!foundStart && velhoCount <= start && start <= charCount   ) 
                { 
                    aa = textNodes[i].textContent.length  - (charCount - start );
                    range.setStart(textNodes[i], aa );
                    foundStart = true;
                }

if (foundStart && end <= charCount) 
                { 
                    bb = textNodes[i].textContent.length - (charCount - end) ;
                    range.setEnd(textNodes[i], bb );
                    break;
                }

}
            var sel = Selector();
            sel.removeAllRanges();
            sel.addRange(range);
            div.focus();
        }

setCursorPosition = function (div, position) 
        { 
            range = createRange(document);
            range.selectNodeContents(div);
            var charCount = 0
            var endCharCount;
            textNodes = getTextNodesIn(div);
            for (var i = 0; i<textNodes.length; i++ ) 
            {
                textNode = textNodes[i];
                endCharCount = charCount + textNode.length;
                if (position >= charCount && position <= endCharCount ) 
                {
                    range.setStart(textNode, position - charCount);
                    range.setEnd(textNode, position - charCount);
                    range.collapse(false);
                    break;
                } 
                charCount = endCharCount;
            }
            var sel = Selector();
            sel.removeAllRanges();
            sel.addRange(range);
            div.focus();
        }

function replaceAll(str, find, replace) 
 {
    return str.replace(new RegExp(find, 'g'), replace);
 }
 function replaceAllR(str, find) 
 {
  var res = str.match(find);
  for(i=0; i<res.length; i++)
    str = str.replace(new RegExp(res[i], 'gi'), "<span style='color:green'>"+res[i]+"</span>");
  return str;
 }

//==========================================================
 function replaceColor( string )
 { 
  var blue=["style", "if", "while", "else", "for", "function", "document", "getElementById",  "setProperty", "Play"]
  for(i=0; i<blue.length; i++)
  {
   var bb = new RegExp("([^\s\.\t\n])?("+blue[i]+")(?![a-z])", "gim");
   string = string.replace(bb, function($0,$1){ return $1?$0:"<span style='color:blue'>"+$0+"</span>" ;})
  }
  string = replaceAllR(string, /\"([^\"])*\"/g);
  return string;
 }

setStyle = function (tag, atributo, valor)
 {
     tag.style[atributo] = valor;
 }

var position;
 press = function (event) 
 {
                position = getCursorPosition (this) 
  if (event.keyCode == 13) 
  {
                 event.preventDefault();  
   this.innerHTML = "<span>"+replaceColor( this.textContent.substring(0, position) + "\n"+ this.textContent.substring( position, this.textContent.length) )+"</span>" 
                 setCursorPosition (this, position+1)
  }
 }

up = function (event) 
 {
                position = getCursorPosition (this) 
  document.getElementById("pos").innerHTML = position ;
  if (event.keyCode == 13){}
  else
  {
   this.innerHTML = "<span>"+replaceColor( this.textContent )+"</span>" 
                 setCursorPosition (this, position)
  }
 }

load = function()
 {
  var divA = document.getElementById("div");  
  divA.style.whiteSpace   = "pre";
  divA.contentEditable    = true;
  divA.style.fontFamily = "Lucida Console"
  divA.style.position = "absolute";
  divA.style.border   = "1px solid #000000";
  divA.style.position = "absolute"; 
  divA.style.left     = "30px"; 
  divA.style.top      = "30px"; 
  divA.style.width    = "950"; 
  divA.style.height   = "350"; 
  divA.spellcheck     =false
  divA.style.border   = "1px solid #000000";
  divA.innerHTML      = document.getElementById("codigo_inicial").value ; 
  divA.onkeypress      = press; 
  divA.onkeyup      = up;
  divA.onclick      = up; 
  divA.innerHTML = "<span>"+replaceColor( divA.textContent )+"</span>" 
 }

</script><br />
<br />
<body onload="load()"><br />
<br />
 <.textarea id="codigo_inicial"  style="display:none;"><br />
x=0;<br />
Play = function()<br />
{<br />
 document.getElementById("id_elements").style.setProperty("left", x+"px") ;<br />
 x += 1; <br />
 if( x  > 500 ) x  = 0;<br />
} <br />
 <./textarea><br />
<br />
    <div id="pos">
</div>
<div id="div">
</div>
</body><br />

Nenhum comentário:

Postar um comentário