Javascript: Split blocks from a string with HTML tags?

Question

I tried to split a block of string from a string with HTML tags. My input is

var data = '<html>
   <body>

      <div class="test">
         <input type="text"/>
      </div>

      <div class="test">
         <input type="text"/>
      </div>

      <div class="test2">
         <input type="text"/>
      </div>

   </body>
</html>'

My excepted output is

  '<div class="test">
     <input type="text"/>
  </div>

  <div class="test">
     <input type="text"/>
  </div>'

I tried this

data.split('<div class="test">');

@Jothimani Have a look at the answer posted by rayon below. That is the right way for doing it. You want it as string or elements? — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Apr 6, 2016 at 9:34

Rayon · Accepted Answer · 2016-04-06 09:54:28Z

2

Create a dummy div element. innerHTML the data in div. You can select class elements from div using getElementsByClassName

var data = '<html>\
   <body>\
      <div class="test">\
         <input type="text"/>\
      </div>\
      <div class="test">\
         <input type="text"/>\
      </div>\
      <div class="test2">\
         <input type="text"/>\
      </div>\
   </body>\
</html>'
var div = document.createElement('div');
div.innerHTML = data;
var classes = div.getElementsByClassName('test');
console.log(classes);

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

Edit: If you want it as a string, you can iterate collection returned by getElementsByClassName, push it in array and Array#join it.

var data = '<html>\
   <body>\
      <div class="test">\
         <input type="text"/>\
      </div>\
      <div class="test">\
         <input type="text"/>\
      </div>\
      <div class="test2">\
         <input type="text"/>\
      </div>\
   </body>\
</html>';
var div = document.createElement('div');
div.innerHTML = data;
var classes = div.getElementsByClassName('test');
var arr = [];
[].forEach.call(classes, function(elem) {
  arr.push(elem.outerHTML);
});
console.log(arr.join(''));
console.log('==============OR===============');
var div2 = document.createElement('div');
[].forEach.call(classes, function(elem) {
  div2.appendChild(elem.cloneNode(true));
});
console.log(div2.innerHTML);

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

edited Apr 6, 2016 at 9:54

answered Apr 6, 2016 at 9:32

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

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

2 Comments

user3141642 Over a year ago

Dear Rayon Thanks, i want it as string

user3141642 Over a year ago

I got the first element 'test', but i need all elements with class 'test'

Collectives™ on Stack Overflow

Javascript: Split blocks from a string with HTML tags?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related