Transformare cod BBCode in HTML si din HTML in BBCode cu JavaScript

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;//www.discant.ro/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:

[b]{TEXT}[/b] - {TEXT}
[i]{TEXT}[/i] - {TEXT}
[u]{TEXT}[/u] - {TEXT}
[s]{TEXT}[/s] - {TEXT}
[url={URL}]{TEXT}[/url] - <a href="{URL}" title="link" target="_blank">{TEXT}</a>
[url]{URL}[/url] - <a href="{URL}" title="link" target="_blank">{URL}</a>
[img={URL} width={NUMBER1} height={NUMBER2}]{TEXT}[/img] - <img src="{URL}" width="{NUMBER1}" height="{NUMBER2}" alt="{TEXT}" />
[img]{URL}[/img] - <img src="{URL}" alt="{URL}" />
[color=COLOR]{TEXT}[/color] - {TEXT}
[highlight={COLOR}]{TEXT}[/highlight] - {TEXT}
[quote="{TEXT1}"]{TEXT2}[/quote] - <div class="quote"><cite>{TEXT1}</cite>{TEXT2}</div>
[quote]{TEXT}[/quote] - <cite>{TEXT}</cite>
[blockquote]{TEXT}[/blockquote] - <blockquote>{TEXT}</blockquote>

- 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;//www.discant.ro/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=_cursuri-online/web-design/coduri-si-functii-in-js/_imgs/webcourses.gif width=191 height=63]discant.ro[/img]';
var str_html = '<strong>Ingrosat</strong>, <em><span style="text-decoration:underline;">Inclinat si Subliniat</span></em>, image: <img src=_cursuri-online/web-design/coduri-si-functii-in-js/_imgs/webcourses.gif" width="191" height="63" alt="discant.ro" /> si un link: <a href=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=_cursuri-online/web-design/coduri-si-functii-in-js/_imgs/webcourses.gif width=191 height=63]discant.ro[/img]';

var str_html = 'Ingrosat, Inclinat si Subliniat, image: <img src=_cursuri-online/web-design/coduri-si-functii-in-js/_imgs/webcourses.gif" width="191" height="63" alt="discant.ro" /> si un link: <a href=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