In aceasta pagina e prezentat un obiect JavaScript care poate fi folosit pentru a transforma cod BBCode in HTML si din HTML in BBCode direct in pagina web, folosind JavaScript.

Cod Convertor BBCode HTML

// functie JS transformare BBCode si HTML - http;//marplo.net/javascript/
var BBCodeHTML = function() {
  var me = this;            // retine instanta de obiect
  var token_match = /{[A-Z_]+[0-9]*}/ig;

  // regexp pt diferiti identificatori in codul bbcode
  var tokens = {
    'URL' : '((?:(?:[a-z][a-z\\d+\\-.]*:\\/{2}(?:(?:[a-z0-9\\-._~\\!$&\'*+,;=:@|]+|%[\\dA-F]{2})+|[0-9.]+|\\[[a-z0-9.]+:[a-z0-9.]+:[a-z0-9.:]+\\])(?::\\d*)?(?:\\/(?:[a-z0-9\\-._~\\!$&\'*+,;=:@|]+|%[\\dA-F]{2})*)*(?:\\?(?:[a-z0-9\\-._~\\!$&\'*+,;=:@\\/?|]+|%[\\dA-F]{2})*)?(?:#(?:[a-z0-9\\-._~\\!$&\'*+,;=:@\\/?|]+|%[\\dA-F]{2})*)?)|(?:www\\.(?:[a-z0-9\\-._~\\!$&\'*+,;=:@|]+|%[\\dA-F]{2})+(?::\\d*)?(?:\\/(?:[a-z0-9\\-._~\\!$&\'*+,;=:@|]+|%[\\dA-F]{2})*)*(?:\\?(?:[a-z0-9\\-._~\\!$&\'*+,;=:@\\/?|]+|%[\\dA-F]{2})*)?(?:#(?:[a-z0-9\\-._~\\!$&\'*+,;=:@\\/?|]+|%[\\dA-F]{2})*)?)))',
    'LINK' : '([a-z0-9\-\./]+[^"\' ]*)',
    'EMAIL' : '((?:[\\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+\.)*(?:[\\w\!\#$\%\'\*\+\-\/\=\?\^\`{\|\}\~]|&)+@(?:(?:(?:(?:(?:[a-z0-9]{1}[a-z0-9\-]{0,62}[a-z0-9]{1})|[a-z])\.)+[a-z]{2,6})|(?:\\d{1,3}\.){3}\\d{1,3}(?:\:\\d{1,5})?))',
    'TEXT' : '(.*?)',
    'SIMPLETEXT' : '([a-zA-Z0-9-+.,_ ]+)',
    'INTTEXT' : '([a-zA-Z0-9-+,_. ]+)',
    'IDENTIFIER' : '([a-zA-Z0-9-_]+)',
    'COLOR' : '([a-z]+|#[0-9abcdef]+)',
    'NUMBER'  : '([0-9]+)'
  };

  var bbcode_matches = [];
  var html_tpls = [];
  var html_matches = [];
  var bbcode_tpls = [];

  var _getRegEx = function(str) {
    var matches = str.match(token_match);
    var nrmatches = matches.length;
    var i = 0;
    var replacement = '';

    if (nrmatches <= 0) {
      return new RegExp(preg_quote(str), 'g');
    }

    for(; i < nrmatches; i += 1) {
      var token = matches[i].replace(/[{}0-9]/g, '');

      if (tokens[token]) {
        replacement += preg_quote(str.substr(0, str.indexOf(matches[i]))) + tokens[token];
        str = str.substr(str.indexOf(matches[i]) + matches[i].length);
      }
    }

    replacement += preg_quote(str);

    return new RegExp(replacement, 'gi');
  };

  var _getTpls = function(str) {
    var matches = str.match(token_match);
    var nrmatches = matches.length;
    var i = 0;
    var replacement = '';
    var positions = {};
    var next_position = 0;

    if (nrmatches <= 0) {
      return str;
    }

    for(; i < nrmatches; i += 1) {
      var token = matches[i].replace(/[{}0-9]/g, '');
      var position;

      if (positions[matches[i]]) {
        position = positions[matches[i]];
      } else {
        next_position += 1;
        position = next_position;
        positions[matches[i]] = position;
      }

      if (tokens[token]) {
        replacement += str.substr(0, str.indexOf(matches[i])) + '$' + position;
        str = str.substr(str.indexOf(matches[i]) + matches[i].length);
      }
    }

    replacement += str;

    return replacement;
  };

  me.addBBCode = function(bbcode_match, bbcode_tpl) {
    bbcode_matches.push(_getRegEx(bbcode_match));
    html_tpls.push(_getTpls(bbcode_tpl));

    html_matches.push(_getRegEx(bbcode_tpl));
    bbcode_tpls.push(_getTpls(bbcode_match));
  };

  me.bbcodeToHtml = function(str) {
    var nrbbcmatches = bbcode_matches.length;
    var i = 0;

    for(; i < nrbbcmatches; i += 1) {
      str = str.replace(bbcode_matches[i], html_tpls[i]);
    }

    return str;
  };

  me.htmlToBBCode = function(str) {
    var nrhtmlmatches = html_matches.length;
    var i = 0;

    for(; i < nrhtmlmatches; i += 1) {
      str = str.replace(html_matches[i], bbcode_tpls[i]);
    }

    return str;
  }

  function preg_quote (str, delimiter) {
    return (str + '').replace(new RegExp('[.\\\\+*?\\[\\^\\]$(){}=!<>|:\\' + (delimiter || '') + '-]', 'g'), '\\$&');
  }

  // adauga BBCodes si codul HTML corespunzator
  me.addBBCode('[b]{TEXT}[/b]', '<strong>{TEXT}</strong>');
  me.addBBCode('[i]{TEXT}[/i]', '<em>{TEXT}</em>');
  me.addBBCode('[u]{TEXT}[/u]', '<span style="text-decoration:underline;">{TEXT}</span>');
  me.addBBCode('[s]{TEXT}[/s]', '<span style="text-decoration:line-through;">{TEXT}</span>');
  me.addBBCode('[url={URL}]{TEXT}[/url]', '<a href="{URL}" title="link" target="_blank">{TEXT}</a>');
  me.addBBCode('[url]{URL}[/url]', '<a href="{URL}" title="link" target="_blank">{URL}</a>');
  me.addBBCode('[url={LINK}]{TEXT}[/url]', '<a href="{LINK}" title="link" target="_blank">{TEXT}</a>');
  me.addBBCode('[url]{LINK}[/url]', '<a href="{LINK}" title="link" target="_blank">{LINK}</a>');
  me.addBBCode('[img={URL} width={NUMBER1} height={NUMBER2}]{TEXT}[/img]', '<img src="{URL}" width="{NUMBER1}" height="{NUMBER2}" alt="{TEXT}" />');
  me.addBBCode('[img]{URL}[/img]', '<img src="{URL}" alt="{URL}" />');
  me.addBBCode('[img={LINK} width={NUMBER1} height={NUMBER2}]{TEXT}[/img]', '<img src="{LINK}" width="{NUMBER1}" height="{NUMBER2}" alt="{TEXT}" />');
  me.addBBCode('[img]{LINK}[/img]', '<img src="{LINK}" alt="{LINK}" />');
  me.addBBCode('[color=COLOR]{TEXT}[/color]', '<span style="{COLOR}">{TEXT}</span>');
  me.addBBCode('[highlight={COLOR}]{TEXT}[/highlight]', '<span style="background-color:{COLOR}">{TEXT}</span>');
  me.addBBCode('[quote="{TEXT1}"]{TEXT2}[/quote]', '<div class="quote"><cite>{TEXT1}</cite><p>{TEXT2}</p></div>');
  me.addBBCode('[quote]{TEXT}[/quote]', '<cite>{TEXT}</cite>');
  me.addBBCode('[blockquote]{TEXT}[/blockquote]', '<blockquote>{TEXT}</blockquote>');
};
var bbcodeParser = new BBCodeHTML();       // creaza instanta de obiect la BBCodeHTML()

Mod de utilizare

1. Copiati codul de mai sus in script-ul JavaScript.
2. Ca sa transformati cod BBCode in HTML, folositi aceasta instructiune:
var html = bbcodeParser.bbcodeToHtml('sir cu BBCode');
3. Ca sa transformati cod HTML in BBCode, folositi aceasta instructiune:
var bbcode = bbcodeParser.htmlToBBCode('sir cu HTML');
- Scriptul poate transforma aceste tag-uri BBCode:
- Se pot adauga si alte tag-uri BBCode, cu aceasta sintaxa:
bbcodeParser.addBBCode('format bbcode', 'format html');
• Exemplu adaugare tag-uri BBCode:
<script>
/* Aici vine codul obiectului de transformare BBCode-HTML */

// adauga BBCode pt <header> si <div> cu ID
bbcodeParser.addBBCode('[header]{TEXT}[/header]', '<header>{TEXT}</header>');
bbcodeParser.addBBCode('[div id="{IDENTIFIER}"]{TEXT}[/div]', '<div id="{IDENTIFIER}">{TEXT2}</div>');
</script>

Exemplu utilizare convertor BBCode-HTML

- Acest script transforma un sir cu BBCode in HTML, si alt sir cu HTML in BBCode, apoi afiseaza doua ferestre alert cu sirurile transformate.
<script>
// functie JS transformare BBCode si HTML - http;//marplo.net/javascript/
var BBCodeHTML = function() {
  var me = this;            // retine instanta de obiect
  var token_match = /{[A-Z_]+[0-9]*}/ig;

  // regexp pt diferiti identificatori in codul bbcode
  var tokens = {
    'URL' : '((?:(?:[a-z][a-z\\d+\\-.]*:\\/{2}(?:(?:[a-z0-9\\-._~\\!$&\'*+,;=:@|]+|%[\\dA-F]{2})+|[0-9.]+|\\[[a-z0-9.]+:[a-z0-9.]+:[a-z0-9.:]+\\])(?::\\d*)?(?:\\/(?:[a-z0-9\\-._~\\!$&\'*+,;=:@|]+|%[\\dA-F]{2})*)*(?:\\?(?:[a-z0-9\\-._~\\!$&\'*+,;=:@\\/?|]+|%[\\dA-F]{2})*)?(?:#(?:[a-z0-9\\-._~\\!$&\'*+,;=:@\\/?|]+|%[\\dA-F]{2})*)?)|(?:www\\.(?:[a-z0-9\\-._~\\!$&\'*+,;=:@|]+|%[\\dA-F]{2})+(?::\\d*)?(?:\\/(?:[a-z0-9\\-._~\\!$&\'*+,;=:@|]+|%[\\dA-F]{2})*)*(?:\\?(?:[a-z0-9\\-._~\\!$&\'*+,;=:@\\/?|]+|%[\\dA-F]{2})*)?(?:#(?:[a-z0-9\\-._~\\!$&\'*+,;=:@\\/?|]+|%[\\dA-F]{2})*)?)))',
    'LINK' : '([a-z0-9\-\./]+[^"\' ]*)',
    'EMAIL' : '((?:[\\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+\.)*(?:[\\w\!\#$\%\'\*\+\-\/\=\?\^\`{\|\}\~]|&)+@(?:(?:(?:(?:(?:[a-z0-9]{1}[a-z0-9\-]{0,62}[a-z0-9]{1})|[a-z])\.)+[a-z]{2,6})|(?:\\d{1,3}\.){3}\\d{1,3}(?:\:\\d{1,5})?))',
    'TEXT' : '(.*?)',
    'SIMPLETEXT' : '([a-zA-Z0-9-+.,_ ]+)',
    'INTTEXT' : '([a-zA-Z0-9-+,_. ]+)',
    'IDENTIFIER' : '([a-zA-Z0-9-_]+)',
    'COLOR' : '([a-z]+|#[0-9abcdef]+)',
    'NUMBER'  : '([0-9]+)'
  };

  var bbcode_matches = [];
  var html_tpls = [];
  var html_matches = [];
  var bbcode_tpls = [];

  var _getRegEx = function(str) {
    var matches = str.match(token_match);
    var nrmatches = matches.length;
    var i = 0;
    var replacement = '';

    if (nrmatches <= 0) {
      return new RegExp(preg_quote(str), 'g');
    }

    for(; i < nrmatches; i += 1) {
      var token = matches[i].replace(/[{}0-9]/g, '');

      if (tokens[token]) {
        replacement += preg_quote(str.substr(0, str.indexOf(matches[i]))) + tokens[token];
        str = str.substr(str.indexOf(matches[i]) + matches[i].length);
      }
    }

    replacement += preg_quote(str);

    return new RegExp(replacement, 'gi');
  };

  var _getTpls = function(str) {
    var matches = str.match(token_match);
    var nrmatches = matches.length;
    var i = 0;
    var replacement = '';
    var positions = {};
    var next_position = 0;

    if (nrmatches <= 0) {
      return str;
    }

    for(; i < nrmatches; i += 1) {
      var token = matches[i].replace(/[{}0-9]/g, '');
      var position;

      if (positions[matches[i]]) {
        position = positions[matches[i]];
      } else {
        next_position += 1;
        position = next_position;
        positions[matches[i]] = position;
      }

      if (tokens[token]) {
        replacement += str.substr(0, str.indexOf(matches[i])) + '$' + position;
        str = str.substr(str.indexOf(matches[i]) + matches[i].length);
      }
    }

    replacement += str;

    return replacement;
  };

  me.addBBCode = function(bbcode_match, bbcode_tpl) {
    bbcode_matches.push(_getRegEx(bbcode_match));
    html_tpls.push(_getTpls(bbcode_tpl));

    html_matches.push(_getRegEx(bbcode_tpl));
    bbcode_tpls.push(_getTpls(bbcode_match));
  };

  me.bbcodeToHtml = function(str) {
    var nrbbcmatches = bbcode_matches.length;
    var i = 0;

    for(; i < nrbbcmatches; i += 1) {
      str = str.replace(bbcode_matches[i], html_tpls[i]);
    }

    return str;
  };

  me.htmlToBBCode = function(str) {
    var nrhtmlmatches = html_matches.length;
    var i = 0;

    for(; i < nrhtmlmatches; i += 1) {
      str = str.replace(html_matches[i], bbcode_tpls[i]);
    }

    return str;
  }

  function preg_quote (str, delimiter) {
    return (str + '').replace(new RegExp('[.\\\\+*?\\[\\^\\]$(){}=!<>|:\\' + (delimiter || '') + '-]', 'g'), '\\$&');
  }

  // adauga BBCodes si codul HTML corespunzator
  me.addBBCode('[b]{TEXT}[/b]', '<strong>{TEXT}</strong>');
  me.addBBCode('[i]{TEXT}[/i]', '<em>{TEXT}</em>');
  me.addBBCode('[u]{TEXT}[/u]', '<span style="text-decoration:underline;">{TEXT}</span>');
  me.addBBCode('[s]{TEXT}[/s]', '<span style="text-decoration:line-through;">{TEXT}</span>');
  me.addBBCode('[url={URL}]{TEXT}[/url]', '<a href="{URL}" title="link" target="_blank">{TEXT}</a>');
  me.addBBCode('[url]{URL}[/url]', '<a href="{URL}" title="link" target="_blank">{URL}</a>');
  me.addBBCode('[url={LINK}]{TEXT}[/url]', '<a href="{LINK}" title="link" target="_blank">{TEXT}</a>');
  me.addBBCode('[url]{LINK}[/url]', '<a href="{LINK}" title="link" target="_blank">{LINK}</a>');
  me.addBBCode('[img={URL} width={NUMBER1} height={NUMBER2}]{TEXT}[/img]', '<img src="{URL}" width="{NUMBER1}" height="{NUMBER2}" alt="{TEXT}" />');
  me.addBBCode('[img]{URL}[/img]', '<img src="{URL}" alt="{URL}" />');
  me.addBBCode('[img={LINK} width={NUMBER1} height={NUMBER2}]{TEXT}[/img]', '<img src="{LINK}" width="{NUMBER1}" height="{NUMBER2}" alt="{TEXT}" />');
  me.addBBCode('[img]{LINK}[/img]', '<img src="{LINK}" alt="{LINK}" />');
  me.addBBCode('[color=COLOR]{TEXT}[/color]', '<span style="{COLOR}">{TEXT}</span>');
  me.addBBCode('[highlight={COLOR}]{TEXT}[/highlight]', '<span style="background-color:{COLOR}">{TEXT}</span>');
  me.addBBCode('[quote="{TEXT1}"]{TEXT2}[/quote]', '<div class="quote"><cite>{TEXT1}</cite><p>{TEXT2}</p></div>');
  me.addBBCode('[quote]{TEXT}[/quote]', '<cite>{TEXT}</cite>');
  me.addBBCode('[blockquote]{TEXT}[/blockquote]', '<blockquote>{TEXT}</blockquote>');
};
var bbcodeParser = new BBCodeHTML();       // creaza instanta de obiect la BBCodeHTML()

// Sir cu BBCode si HTML pt test
var str_bb = '[b]Ingrosat[/b], [i][u]Inclinat si Subliniat[/u][/i] , un link intern: [url]/javascript/getelementbyid[/url], si imagine:  [img=https://coursesweb.net/imgs/webcourses.gif width=191 height=63]CoursesWeb.net[/img]';
var str_html = '<strong>Ingrosat</strong>, <em><span style="text-decoration:underline;">Inclinat si Subliniat</span></em>, image: <img src="https://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="CoursesWeb.net" /> si un link: <a href="https://coursesweb.net/javascript/" title="link" target="_blank">coursesweb.net/</a>';

// transforma sirurile
var get_html = bbcodeParser.bbcodeToHtml(str_bb);
var get_bbcode = bbcodeParser.htmlToBBCode(str_html);

// Test BBCode-HTML
alert(get_html);
alert(get_bbcode);
</script>
- Ca sa vedeti rezultatul, clic pe butoanele de mai jos:
Acestea sunt sirurile:
    var str_bb = '[b]Ingrosat[/b], [i][u]Inclinat si Subliniat[/u][/i] , un link intern: [url]/javascript/getelementbyid[/url], si imagine: [img=https://coursesweb.net/imgs/webcourses.gif width=191 height=63]CoursesWeb.net[/img]';

    var str_html = '<strong>Ingrosat</strong>, <em><span style="text-decoration:underline;">Inclinat si Subliniat</span></em>, image: <img src="https://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="CoursesWeb.net" /> si un link: <a href="https://coursesweb.net/javascript/" title="link" target="_blank">coursesweb.net/</a>';

    -    


Acest convertor BBCode-HTML e creat folosind codul de la: github.com/wGEric/phpBB-BBCode-Javascript-Parser

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag creaza un text ingrosat?
<q> <strong> <em>
<p>Adresa: <strong>http://CoursesWeb.net/</strong> - Tutoriale.</p>
Care din aceste coduri CSS afiseaza textul ingrosat?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
Ce functie JavaScript apeleaza o alta functie, in mod repetat, la un anumit interval de timp?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Clic pe variabila definita corect in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
Care din urmatoarele forme ale verbului "travel" (a calatori) e la timpul Prezent Perfect?
have traveled shall travel had traveled
We have traveled in space.
- Noi am calatorit (deja) in spatiu.
Care din urmatoarele forme ale verbului "pintar" (a picta) se foloseste la Trecutul Imperfect?
ir a pintar pintaba pintó
La niña pintaba un arco iris.
- Fetita picta un curcubeu.
Transformare cod BBCode in HTML si din HTML in BBCode cu JavaScript

Last accessed pages

  1. Gramatica limbii engleze - Prezentare Generala (119506)
  2. Blog si Cugetari Personale (9624)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (79588)
  4. Instructiuni conditionale switch (562)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (47594)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (6343)
  2. Curs HTML gratuit Tutoriale HTML5 (5292)
  3. Curs si Tutoriale JavaScript (4682)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (4558)
  5. Curs CSS Online Tutoriale CSS3 (4401)