0

Consider this my value: 

var value = "<br><br><div class="test">-- Thanks, <br><div><br></div></div>";

I want to remove test class div tag i.e <div class="test1"> and related to closing tag </div>.

Expecting results will be: 

"<br><br>-- Thanks, <br><div><br></div>"

I am trying with regular expression: 

value = value.replace(/(<div class="test">|<\/div>)/g, '');

but it's removing adjacent div tag: 

<br><br><div class="test">-- Thanks, <br><div><br>

not the exactly with the closing tag.

How to do this?

James Z
  • 12,209
  • 10
  • 24
  • 44
Premkumar
  • 1

3 Answers3

1

Your best bet here is to use the HTML parser built into the browser. For instance:

var div, divToRemove, node, sibling;
div = document.createElement('div');
div.innerHTML = value;
divToRemove = div.querySelector('.test');
for (node = divToRemove.firstChild, sibling = node.nextSibling;
     node;
     node = sibling, sibling = node && node.nextSibling) {

     divToRemove.parentNode.insertBefore(node, divToRemove);
}
divToRemove.parentNode.removeChild(divToRemove);
value = div.innerHTML;

Live Example:

var value = '<br><br><div class="test">-- Thanks, <br><div><br></div></div>';
snippet.log("Before: " + value);
var div, divToRemove, node, sibling;
div = document.createElement('div');
div.innerHTML = value;
divToRemove = div.querySelector('.test');
for (node = divToRemove.firstChild, sibling = node.nextSibling; node; node = sibling, sibling = node && node.nextSibling) {
  divToRemove.parentNode.insertBefore(node, divToRemove);
}
divToRemove.parentNode.removeChild(divToRemove);
value = div.innerHTML;
snippet.log("After: " + value);
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Thanks Mr. T.J Crowder!! You used div.innerHTML, so implicitly it'll execute it in browser. this is case hackers may handle the html string content right? Please let me know if i am correct or not. – Premkumar Aug 06 '15 at 11:50
  • @Premkumar: Sorry, I don't understand. – T.J. Crowder Aug 06 '15 at 11:56
  • Okay, Let me rephrase different way. basically my html string is secure mail content, at this case if we use innerHTML (div.innerHTML = value;) Is it the correct way to do ? that's what my concern is. – Premkumar Aug 06 '15 at 13:04
  • @Premkumar: Did you mean *insecure* email? If the HTML is coming from an untrusted source, you don't want to hand it to the browser. That would be **really** important information to put in the question. Instead, you'd want to use any of several HTML "sanitizing" libraries to only allow through content you have a high degree of trust in. – T.J. Crowder Aug 06 '15 at 13:30
0

You need to first save parent div's html in a variable

var html = document.getElementByClassName('test1').innerHtml;

Then remove the div:

document.getElementByClassName('test1').remove();

Then append the html to the parent of the div

var bodyHtml = document.getElementByTagName('body');

bodyHtml = bodyHtml + html;
dpanshu
  • 453
  • 3
  • 14
  • Look again at the question: The OP is dealing with HTML markup in a string. – T.J. Crowder Aug 05 '15 at 08:41
  • Thanks Mr. T.J Crowder!! You used div.innerHTML, so implicitly it'll execute it in browser. this is case hackers may handle the html string content right? Please let me know if i am correct or not. – Premkumar Aug 06 '15 at 11:51
0

Use the DOM to get it right

var html = '<br><br><div class="test">-- Thanks, <br><div><br></div></div>';
var frag = document.createElement('div');
frag.innerHTML = html;
var tgt = frag.querySelector('.test');
var par = tgt.parentNode;
while(tgt.firstChild) {
    par.insertBefore(tgt.firstChild, tgt);
};
tgt.remove();
console.log(frag.innerHTML);
Jaromanda X
  • 53,868
  • 5
  • 73
  • 87
  • Thanks Mr. Jarmanda!! You used div.innerHTML, so implicitly it'll execute it in browser. this is case hackers may handle the html string content right? Please let me know if i am correct or not. – Premkumar Aug 06 '15 at 11:51
  • no idea what you are saying about hackers - the above possibly works in nodejs if you use jsdom – Jaromanda X Aug 06 '15 at 11:55
  • I am using dojo framework, Let me rephrase different way. basically my html string is secure mail content, at this case if we use innerHTML (div.innerHTML = value;) Is it the correct way to do ? that's what my concern is. – Premkumar Aug 06 '15 at 13:15
  • which is a client side thing, right? so no need for jsdom – Jaromanda X Aug 06 '15 at 13:16
  • Yes, it's client side. The above code is perfectly working. Did you get my concern about div.innerHTML. basically i am worrying to use innerHTML here. is there any alternative way to resolve it. – Premkumar Aug 06 '15 at 13:22
  • why are you concerned about using innerHTML of an element you create but never add to the DOM? – Jaromanda X Aug 06 '15 at 13:25
  • yes.Thanks Jaromanoda! Let me check with my higher officials. – Premkumar Aug 06 '15 at 13:41
  • @JaromandaX: Creating an element still has potential side-effects, such as retrieving external resources. If Premkumar is saying that the HTML content is *insecure* (from an untrusted source), then your answer and mine (which are essentially the same thing) are both problematic. (The fact the HTML comes from an untrusted source, if true, **really** should have been in the question, of course.) – T.J. Crowder Aug 06 '15 at 13:50
  • well, yes, the example code looks benign - I've not tested it, but what's the worst that can happen with an element not added to the DOM? no javascript gets executed does it? do images even get loaded? – Jaromanda X Aug 06 '15 at 13:56
  • well, scripts in innerHTML don't seem to get executed, but images in img tags do get loaded – Jaromanda X Aug 06 '15 at 14:10