How to select a full xml/html tag with Regular Expression even if there are identical tags internally?

Question

I am trying to do the following processing in a javascript string using ER (Regular Expression):

With that input: um <b>negrito<b>negrito interno</b>externo</b> aqui <b>negrito</b> <i>italico</i>., would like to get the tag <b> complete, with all its contents up to its closing pair </b>, this being the expected result: <b>negrito<b>negrito interno</b>externo</b> and <b>negrito</b>.

But I’m failing to consider that a tag can contain the same internally, and I was able to get as far as possible to this result (which does not consider the possibility of a tag equal internally, as can be seen in the first result where it is <b>negrito<b>negrito interno</b> instead of <b>negrito<b>negrito interno</b>externo</b>:

var entrada = 'um <b data-remove>negrito<b>negrito interno</b>externo</b> aqui <b>negrito</b> <i>italico</i>.';
var regex = /<(b)>.*?<\/\1>/g;

// limpa DOM para imprimir
document.body.innerHTML = "";

entrada.replace(regex, function(match) {
  console.log(match);
  // para imprimir do DOM
  document.body.appendChild(document.createTextNode(match));
  document.body.appendChild(document.createElement("br"));
  return match;
});

body {
  white-space: pre;
  font-family: monospace;
}

My knowledge of ER is limited, and has practically reached the limit in this situation. So I await some precious hint of some expert in ER, or a "Forget it’s not possible with ER =(".

Edit 2 Expected solution:

The way I look and do not know how to do would be something that was counting/accumulating the occurrences of opening tags and ignoring the closures until it is the matching closure for the opening (equivalent to the first opening tag).

If there are any questions comment!

Edit 1: My real case for better understanding of the problem:

This actual example is only intended to demonstrate the context where I am using the function in question, and why I cannot do this via jQuery or any other parser in the browser’s DOM. Because I need to leave the DOM correct, so that the CSS is applied correctly and only after the conversion to style inline I can remove what was only for the Browser to render correctly and then get the result of my expected template.

$(function() {
  $('#btnGenerateHtmlMail').click(function(ev) {
    var $report = $('#report');
    convertCssToInlineStyle($report);
    var reportHtml = $report.html();
    reportHtml = reportHtml
      /* remove class attribute */
      .replace(/class=('|").*?\1/g, "")
      /* remove id attribute */
      .replace(/id=('|").*?\1/g, "")
      /* remove comments html */
      .replace(/<!--.*?-->/g, "")
      /* remove tab, enter and whitespace */
      .replace(/\s\s+/g, ' ')
// ----->>>   // esse é o meu caso de problema, nesse exemplo não da problema pois nnão há tags iguais dentro do tr, mas sei que isso seria um bug que quero resolver para tornar a ferramenta generica
      .replace(/<(tr) data-remove="true".*?>.*?<\/\1>/g, function replacer(match) {
        console.log(match);
        return match.match(/{{.*?}}/g);
      });
    $('#result').text(reportHtml);
  });
});


/* Metódos irrelevantes para o problema */

function getCssDeclared($elem) {
  var sheets = document.styleSheets,
    o = {};
  for (var i in sheets) {
    var rules = sheets[i].rules || sheets[i].cssRules;
    for (var r in rules) {
      if ($elem.is(rules[r].selectorText)) {
        o = $.extend(o, css2json(rules[r].style), css2json($elem.attr('style')));
      }
    }
  }
  return o;
}

function css2json(css) {
  var s = {};
  if (!css)
    return s;
  if (css instanceof CSSStyleDeclaration) {
    for (var i in css) {
      if ((css[i]).toLowerCase) {
        s[(css[i]).toLowerCase()] = (css[css[i]]);
      }
    }
  } else if (typeof css == "string ") {
    css = css.split("; ");
    for (var i in css) {
      var l = css[i].split(": ");
      s[l[0].toLowerCase()] = (l[1]);
    }
  }
  return s;
}

function convertCssToInlineStyle($root) {
  $root.each(function() {
    var $item = $(this);

    var style = getCssDeclared($item);
    $item.css(style);

    // recursive call chields
    convertCssToInlineStyle($item.children());
  });
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
}

table td, table th {
	padding: 8px;
	padding-top: 3px;
	padding-bottom: 3px;
	line-height: 1.428571429;
	border: 1px solid #ddd;
}

table > tfoot {
	font-weight: bold;
	text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="report">
  <table>
    <thead>
      <tr data-remove="true">
        <th>{{theadContent}}</th>
      </tr>
    </thead>
    <tbody>
      <tr data-remove="true">
        <th>{{tbodyContent}}</th>
      </tr>
    </tbody>
    <tfoot>
      <tr data-remove="true">
        <th>{{tfootContent}}</th>
      </tr>
    </tfoot>
  </table>
</div>
<div id="tools">
  <button id="btnGenerateHtmlMail">
    Gerar HTML E-mail
  </button>
  <div contenteditable="true" id="result" style="width: 99%;resize: none;border: 1px solid #ccc;padding: 0.5%;"></div>
</div>

Note: In this example (real) not the problem because there are no identical tags inside tr, but I know this would be a bug I want to solve to make the tool generic.

Answer 1

The problem is that you are trying to process a language that is not regular (HTML) with regular expressions. The solution is you write a recursive function that cleans, something like:

var attributeWhiteList = ['style'];  // atributos que você quer deixar
var elementWhiteList = ['#text', 'TABLE', 'THEAD', 'TBODY', 'TFOOT', 'TR', 'TH', 'TD', 'P', 'B', 'DIV'];  // elementos que você quer deixar

function cleanHTMLForEMail(node) {
    if (node.nodeName === '#text') {
        // aqui você editar node.textContent pra tirar espaço em branco
        return node;
    }

    // listar atributos
    var attributeNames = [];
    for (var i = 0; i < node.attributes.length; i++) {
        attributeNames.push(node.attributes[i].name);
    }

    // tirar todos os atributos fora da whitelist
    for (var i = 0; i < attributeNames.length; i++) {
        if (attributeWhiteList.indexOf(attributeNames[i]) === -1) {
            node.removeAttribute(attributeNames[i]);
        }
    }

    // listar filhos
    var children = [];
    for (var i = 0; i < node.childNodes.length; i++) {
        children.push(node.childNodes[i]);
    }

    // tirar todos os filhos fora da whitelist
    // e limpar os que estão dentro
    for (var i = 0; i < children.length; i++) {
        if (elementWhiteList.indexOf(children[i].nodeName) === -1) {
            node.removeChild(children[i]);
        } else if (children[i].nodeName === 'TR' && children[i].dataset.remove === 'true') {
            node.removeChild(children[i]);
        } else {
            node.replaceChild(cleanHTMLForEMail(children[i]), children[i]);
        }
    }

    return node;
}

Edited: Jsfiddle, fixing small implementation errors, and working on the example you wanted to solve.

Answer 2

As said by @ctgPi:

HTML is not a regular language and therefore cannot be processed by a regular expression.

Therefore it is necessary to write functions to perform HTML processing.

Here a sample of code you can work on (uses regular expressions).

// String com seu HTML
var string = '<table><thead><tr data-remove="true"><th></th><th><th>{{theadContent}}</th></th><th></th></tr></thead><tbody><tr data-remove="true"><th>{{tbodyContent}}</th></tr></tbody><tfoot><tr data-remove="true"><th>{{tfootContent}}</th></tr></tfoot></table>';

// Converte a String em Objeto JQuery
var $element = $(string);

//Itera sobre as raízes realizando as substituições necessárias
$('*[data-remove=true]', $element).each(function(index) {
  $(this).replaceWith($(this).html().replace(/.*?(\{\{[^\}]*\}\}).*/, '$1'));
});

// Converte o objeto JQuery em String
var string_processada = $element.get(0).outerHTML;

// Imprime na tela
$('body').text(string_processada);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

It cuts off branches of DOM whose root has the attribute data-remove worthwhile true; leaving only the part involved in "{{" and "}}".

May contain bugs that I didn’t see.

Answer 3

Hello,

I’m not sure I understand your problem. We usually only use ER for data validation.

Regular expressions: introduction

http://turing.com.br/material/regex/introducao.html

When we need to change add or remove some HTML element I usually use jquery selectors.

http://simplesideias.com.br/usando-jquery-na-pratica

Answer 4

You can (and in my opinion should) use the browser parser itself:

buffer = document.createElement('div');
buffer.innerHTML = 'um <b>negrito<b>negrito interno</b>externo</b> aqui <b>negrito</b> <i>italico</i>.';
console.log(buffer.querySelectorAll('b'));

If you only want the b in first level, you can create two div, one inside the other, and search only div > b.

(from what I have tested, this seems to be immune to XSS as long as you discard the resulting node and do not insert it directly into the document)

Answer 5

Basically this Regex works for your problem. In some samples it should fail. But for your problem it serves.

\<(minhaTag)(?: .*?)?\>(?:[^\<]|\<(.*?)\>[^\<]*\<\/\2\>)*\<\/\1\>

Regex Tested Here

Substitute minhaTag by the name of tag desired. This regex will reference the most superficial element of tag specified and its contents. The element can contain attributes.

Tips:

• Be careful with the operators *? and * study their differences.

• Remember to include \n (new line) to class . through the modifier single line (s), in case this modifier is supported.

• Use the modifier global (g) in case you want all the tags surfaces specified in the sample (vine the link above).