Parse html string and delete some elements

Question

I have a html string and I need to remove all between first occurrence of <div class="c and first close tag > and last closing tag "</div>". The first, should be this because it class is dynamically generated.

For example: <div class="c2029" style="font-size:45px"><p class="auto">Testing 123...</p></div> should be transformed to <p class="auto">Testing 123...</p>

I tried this, but it's removing all string:

var testString = '<div class="c2029" style="font-size:45px"><p class="auto">Testing 123...</p></div>'
var result = testString.replace(/\<div\_c.*\>/, '');

The content into div that should be removed is dynamically generated, it is an example.

More examples of dynamic string generated:

var testString = '<div class="c03"><div style="text-align: center">Testing 123...</div></div>';
var testString = '<div class="c435">Hello</div>';
var testString = '<div class="c1980"><a href="stackoverflow.com">TEST</a></div>';

dfsq · Accepted Answer · 2018-02-01 14:04:09Z

2

No need to use regular expressions, you can achieve this with jQuery's $.fn.unwrap:

$('[class^="c"]').children().unwrap()

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

<div class="c2029" style="font-size:45px">
  <p class="auto">Testing 123...</p>
</div>

To make it more bullet proof and target only element with class staring with "c" and with numbers after you could add additional filtering step:

$('[class^="c"]').filter(function () {
  return this.className.match(/\bc\d+\b/)
}).children().unwrap()

This way it will not affect classes like cello (starts with "c").

edited Feb 1, 2018 at 14:04

answered Feb 1, 2018 at 13:55

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Julyano Felipe Over a year ago

But as I said, the class is generated dynamically

dfsq Over a year ago

Do you know that there is . auto inside or anything that you know for sure?

Julyano Felipe Over a year ago

Not, that's why I'm trying to use regex, because all into the div that must be removed is dynamic

dfsq Over a year ago

Still possible without hardcode regexp. Check updated approach.

Aniket Sahrawat Over a year ago

@dfsq Sorry, I couldn't reply to your comment but the thing is I am parsing html string and you are dumping the html in dom, there is a big difference :)

|

Aniket Sahrawat · Accepted Answer · 2018-02-03 03:33:07Z

2

Regex is wrong tool for this. You can just $.parseHTML() and then find() using [name^=”value”] selector and use it:

var all = ['<div><div class="c2029" style="font-size:45px"><p class="auto">Testing 123...</p></div></div>', '<div><div class="c435">Hello</div></div>', '<div><div class="c1980"><a href="stackoverflow.com">TEST</a></div></div>'];

$.each(all, function(k,s) { f(s); });

function f(s) {
    var nodes = $($.parseHTML(s)); // parse string to jquery object
    var $p = nodes.find('div[class^="c"]'); // select all classes that starts with c

    var inner = $p.prop('innerHTML'); // inner html of $p
    console.log("Inner: " + inner);
 
    $p.html(''); // select children of $p and remove
    var outer = $p.prop('outerHTML'); // outer html of $p
    console.log("Outer: " + outer);
}

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

edited Feb 3, 2018 at 3:33

answered Feb 1, 2018 at 13:55

Aniket Sahrawat

13k3 gold badges44 silver badges69 bronze badges

5 Comments

Julyano Felipe Over a year ago

The tag <p> is an exemple, the content in div that should be removed is dynamic

Aniket Sahrawat Over a year ago

@JulyanoFelipe Does not matter, you can find it using right tools. But regex is a big no!

Aniket Sahrawat Over a year ago

@JulyanoFelipe Can you post few more examples of the dynamic content?

Julyano Felipe Over a year ago

Is it work with special characteres? I'm getting undefined with characteres like "á" and "ã" into div's content

Aniket Sahrawat Over a year ago

@JulyanoFelipe Those have different unicode codepoints. and you will need to use the exact same character instead of a to make it work

Julyano Felipe · Accepted Answer · 2018-02-01 17:09:51Z

0

Based on Stack Overflow answers, I found this solution that resolve my problem:

var testString = '<div class="c2029" style="font-size:45px"><p class="auto">Testing 123...</p></div>'
var result = testString.replace(/<div class="c.*?>(.*?)<\/div>/, '$1');
document.write(result);
console.log(result);

answered Feb 1, 2018 at 17:09

Julyano Felipe

2473 silver badges22 bronze badges

1 Comment

Aniket Sahrawat Over a year ago

The above approach works fine but should not be used to manipulate elements, there are lot better approaches than this one.

Collectives™ on Stack Overflow

Parse html string and delete some elements

3 Answers 3

6 Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related