# HackerRank Detect HTML Attributes Solution

#### ByBrokenprogrammers

Dec 8, 2022

Hello Programmers, In this post, you will know how to solve the HackerRank Detect HTML Attributes Solution. This problem is a part of the Regex HackerRank Series.

One more thing to add, don’t directly look for the solutions, first try to solve the problems of Hackerrank by yourself. If you find any difficulty after trying several times, then you can look for solutions.

## HackerRank Detect HTML Attributes Solution

Problem

Charlie’s second assignment was given by the Professor as soon as he submitted the first one. Professor asked Charlie to create a list of all the attributes of every tag found in HTML pages.

This is a paragraph

The above HTML string has p as its tag but no attributes.

```<a href="http://www.quackit.com/html/tutorial/html_links.cfm">Example Link</a>
```

This string has a as a tag and href as an attribute.

Input Format

The first line contains N, the number of lines in the HTML fragment. This is followed by lines from a valid HTML document or fragment.

Constraints

Number of characters in the test fragments <= 10000 characters. Characters will be restricted to ASCII. Fragments for the tests will be picked up from Wikipedia.
Attributes are all lowercase alphabets.

Output Format

Each tag must be separated by a newline arranged in lexicographic order
Each attribute noted for a given tag must be arranged next to a tag in lexicographic order.

The output will be of the format

tag-1:attribute-1,attribute-2,attribute-3….
tag-2:attribute-1,attribute-2,attribute-3….
tag-3:attribute-1,attribute-2,attribute-3….

tag-n:attribute-1,attribute-2,attribute-3….

Where tag-1 is lexicographically smaller than tag-2 and attribute-1 is lexicographically smaller than attribute-2

Sample Input:1

```2
```

Sample Output:1

a:href
div:class
p:

Sample Input:2

Sample Output:2

a:href,title
b:
br:style
div:class,style
i:
li:style

### HackerRank Detect HTML Attributes Solutions in Cpp

```#include <iostream>
#include <string>
#include <map>
#include <vector>
#include <algorithm>
using namespace std;
map<string, vector<string> > tags;
int main() {
int n;
cin >> n;
string s;
bool c1=false, c2=false, c3=false;
string att = "", tag="";
vector< vector<string> > atts;
while (getline(cin, s)) {
c1 = c2 = c3 = false;
for (int i=0; i<s.length(); i++) {
if (s[i] == '"') {
c1 = !c1;
continue;
}
if (s[i] == '\'') {
c2 = !c2;
continue;
}
if (s[i] == '\\') {
i++;
continue;
}
if (c1 || c2)
continue;
if (s[i] == '>')
c3 = true;
if (s[i] == '<')
c3 = false;
if (c3) continue;
if (s[i] == '<') {
i++;
if (s[i] == '/') {
while (s[i] != '>')
i++;
c3 = true;
continue;
}
tag = "";
while (s[i] != ' ' && s[i] != '>')
tag += s[i++];
tags[tag].push_back("");
if (s[i] == '>')
c3 = true;
continue;
}
if ((s[i] == '=' || s[i] == ' ') && att != "") {
tags[tag].push_back(att);
att = "";
}
if (s[i] >= 'a' && s[i] <= 'z')
att += s[i];
}
}
for (auto i=tags.begin(); i!=tags.end(); i++) {
sort(i->second.begin(), i->second.end());
for (int j=1; j<i->second.size(); j++) {
if (i->second[j] == i->second[j-1]) {
i->second.erase(i->second.begin()+j-1);
j--;
}
}
cout << i->first << ":";
for (int j=0; j<i->second.size(); j++) {
if (j>1) cout << ",";
cout << i->second[j];
}
cout << "\n";
}
return 0;
}```

### HackerRank Detect HTML Attributes Solutions in Java

```import java.io.*;
import java.util.*;
import java.text.*;
import java.math.*;
import java.util.regex.*;
public class Solution {
public static void main(String[] args) {
Scanner in = new Scanner(System.in);
int n = in.nextInt();
String s = in.nextLine();
Map<String,Set<String>> html = new TreeMap<String,Set<String>>();
for (int i = 0; i < n; i++) {
s = in.nextLine();
Pattern p = Pattern.compile("(<([a-z0-9]+)(\"[^\"]*\"|'[^']*'|[^'\">])*>)");
Pattern a = Pattern.compile(" ([a-z]+)=");
Matcher m = p.matcher(s);
while (m.find()){
Set<String> attributes = new TreeSet<String>();
Matcher m2 = a.matcher(m.group(0));
while (m2.find()) {
}
if (!html.containsKey(m.group(2))) {
html.put(m.group(2), attributes);
} else {
html.put(m.group(2), attributes);
}
}
}
for (Map.Entry<String,Set<String>> entry : html.entrySet()) {
System.out.print(entry.getKey() + ":");
Set<String> temp = entry.getValue();
String[] attArray = temp.toArray(new String[0]);
if (attArray.length > 0) {
System.out.print(attArray[0]);
for (int i = 1; i < attArray.length; i++) {
System.out.print("," + attArray[i]);
}
}
System.out.println();
}
}
}```

### HackerRank Detect HTML Attributes Solutions in Python

```import re
def main():
testcase = int(raw_input())
db = {}
form = re.compile(".*<(\w+)")
formatt = re.compile("(\w+)=")
for i in range(testcase):
temp = raw_input()
arr = re.split(" |>", temp)
for j in arr:
if(form.match(j)):
m = form.match(j)
if(m.group(1) not in db):
db[m.group(1)] = []
elif(formatt.match(j)):
n = formatt.match(j)
if(n.group(1) not in db[m.group(1)]):
db[m.group(1)].append(n.group(1))

for x in sorted(db.iterkeys()):
out = x+":"
db[x].sort()
for y in db[x]:
out += y+","
if(out != x + ":"):
out = out[:-1]
print(out)

main()```

### HackerRank Detect HTML Attributes Solutions in JavaScript

```'use strict';
function processData(input) {
var lines = input.split('\n');
var n = parseInt(lines.shift(), 10);
var tagRE = new RegExp('(?:<\\s*(\\w+)[^>]*>)', 'ig');
var attrRE = new RegExp('(\\w+)=(?:"[^"]*"|\'[^\']*\')', 'ig');
var data = lines.splice(0, n);
var tags = {};
data.forEach(function (s) {
var tagArr = null;
while ((tagArr = tagRE.exec(s)) != null) {
var tag = tagArr[1];
if (tags[tag] === undefined) { tags[tag] = {}; }
var tagStr = tagArr[0];
var attrArr = null;
while ((attrArr = attrRE.exec(tagStr)) != null) {
var attr = attrArr[1];
tags[tag][attr] = 0;
}
}
});
var res = [];
for (var i in tags) {
var attrs = [];
for (var j in tags[i]) {
attrs.push(j);
}
attrs.sort();
res.push({'tag': i, 'attrs':attrs});
}
res.sort(function(o1, o2) { return o1.tag > o2.tag; });
res.forEach(function (o) {
process.stdout.write(o.tag + ':' + o.attrs.join(',') + '\n');
});
}
process.stdin.resume();
process.stdin.setEncoding("ascii");
var _input = "";
process.stdin.on("data", function (input) { _input += input; });
process.stdin.on("end", function () { processData(_input); });```

### HackerRank Detect HTML Attributes Solutions in PHP

```<?php
\$lin = fgets(STDIN);
\$cont="";
for(\$i=0;\$i<\$lin;\$i++){
\$cont.=fgets(STDIN);
}
\$tags= array();
if (preg_match_all("/<\s*([^\s\/>]+)([^>]*)>/im",\$cont,\$matches)){
foreach(\$matches[1] as \$i=>\$tag){
\$tag=strtolower(trim(\$tag));
if (preg_match_all("/([^=\"']+)=[\"'][^\"']*[\"']/im",\$matches[2][\$i],\$matches1)){
foreach(\$matches1[1] as \$attr){
\$tags[\$tag][]=trim(\$attr);
}
} else {
\$tags[\$tag][]="";
}
}
}
\$tags1=array_keys(\$tags);
sort(\$tags1);
foreach(\$tags1 as \$tag1){
\$attrs=array_unique(\$tags[\$tag1]);
sort(\$attrs);
echo \$tag1.":".implode(",",\$attrs)."\n";
}
?>```

Disclaimer: This problem (Detect HTML Attributes) is generated by HackerRank but the Solution is Provided by BrokenProgrammers. This tutorial is only for Educational and Learning purposes.