CODEWITHSUNDEEP
javascriptstringsplit
user3141642
user3141642

Reputation:

Javascript: Split blocks from a string with HTML tags?

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">');

Upvotes: 0

Views: 1211

Answers (1)

Rayon
Rayon

Reputation: 36609

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>

Upvotes: 2

Related Questions