I have one string which contain both texts and many html tags with there respective attribute and its value for example:-

I am trying to takeout all the tag names and push inside array note:- I have two custom function named trim() and null() that removes all the spaces of string and checks whether supplied argument is null.

var a = `
<div class="box">
  <span id="box-span">
                             <p class="texts">very long texts goes here.</p>
                             <p class="texts">very long texts goes here</p>
                             <p class="texts">very long texts goes here</p>
                         </span>
</div>`;
var tags = function(string) {
  var array = ['hello'];
  var string = a.trim('');
  var len = string.length;

  for (var i = 0; i < len; i++) {
    index1 = string.indexOf('>');
    index2 = string.indexOf('<');
    index3 = string.indexOf('/');

    if (null(index1) && index1 !== -1 && null(index2) && index2 !== -1) {
      // if somthing is found 
      x = string.substr(index1, index2);
      g = x.indexOf('/') // for end tag
      if (null(g) || g !== -1) {
        x = string.substr(index1, index2 - 1);
        array.push(x);
      } else {
        array.push(x);
      }

      z = string.substr(index2); // new string with reducing 1 tag
      if (z.length < len && z.length > 0) {
        tags(z)
      } else {
        return array;
        break;
      }


    }

  }
}
console.log(tags(a));

I have one string which contain both texts and many html tags with there respective attribute and its value for example:-

I am trying to takeout all the tag names and push inside array note:- I have two custom function named trim() and null() that removes all the spaces of string and checks whether supplied argument is null.

var a = `
<div class="box">
  <span id="box-span">
                             <p class="texts">very long texts goes here.</p>
                             <p class="texts">very long texts goes here</p>
                             <p class="texts">very long texts goes here</p>
                         </span>
</div>`;
var tags = function(string) {
  var array = ['hello'];
  var string = a.trim('');
  var len = string.length;

  for (var i = 0; i < len; i++) {
    index1 = string.indexOf('>');
    index2 = string.indexOf('<');
    index3 = string.indexOf('/');

    if (null(index1) && index1 !== -1 && null(index2) && index2 !== -1) {
      // if somthing is found 
      x = string.substr(index1, index2);
      g = x.indexOf('/') // for end tag
      if (null(g) || g !== -1) {
        x = string.substr(index1, index2 - 1);
        array.push(x);
      } else {
        array.push(x);
      }

      z = string.substr(index2); // new string with reducing 1 tag
      if (z.length < len && z.length > 0) {
        tags(z)
      } else {
        return array;
        break;
      }


    }

  }
}
console.log(tags(a));

this is my idea but it dosn't works.

• javascript

• 1 Trying to parse out data from raw HTML through text processing is hard and usually very error prone. I would take an approach like the the currently proposed answers, using the browser to parse the text into a DOM and then extracting the information from the DOM. – Useless Code Commented Nov 8, 2017 at 10:56

2 Answers 2

Updated ; only fetch unique tags (no duplicates).

Something like will put you on the path to strip all availble tags from HTML...

 var a = `<div class="box">
                     <span id="box-span">
                         <p class="texts">very long texts goes here.</p>
                         <p class="texts">very long texts goes here</p>
                         <p class="texts">very long texts goes here</p>
                     </span> 
          </div>`;

 var temp = document.createElement("div");
 temp.innerHTML = a;

 var all = temp.getElementsByTagName("*");
 var tags = [];
 for (var i = 0, max = all.length; i < max; i++) {       
   var tagname = all[i].tagName;
   if (tags.indexOf(tagname) == -1) {
     tags.push(tagname);
   }

 }

 console.log(tags);

https://jsfiddle/9phzt1y2/2/

var str= `<div class="box">
                     <span id="box-span">
                         <p class="texts">very long texts goes here.</p>
                         <p class="texts">very long texts goes here</p>
                         <p class="texts">very long texts goes here</p>
                     </span> 
          </div>`;

var tag = document.createElement("div");
tag.innerHTML = str;

var t = tag.getElementsByTagName("*");
var ele = [];
for (var i = 0; i < t.length; i++) {
  ele.push(t[i].tagName);
}

console.log(ele);