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

As stated by @ ctgPi :

  

HTML is not a regular language and therefore can not be rendered by a regular expression.

It is therefore necessary to write functions to perform HTML processing.

Here is a sample code to work with (use 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>

ItcutsDOMbrancheswhoseroothastheattributedata-removewithvaluetrue;leavingonlythepartinvolvedin"{{" e "}}".

It may contain bugs that I have not seen.

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 does the cleaning, 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 in the example you wanted solve.

Hello,

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

Regular expressions: introduction

link

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

link

You can (and in my opinion should) use the browser's own parser:

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 b on the first level, you can create two div , one inside the other, and only search div > b .

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

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

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

Regex Tested Here

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

Tips:

• Beware of the *? and * operators study their differences.

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

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