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 <p><a href="http://www.quackit.com/html/tutorial/html_links.cfm">Example Link</a></p> <div class="more-info"><a href="http://www.quackit.com/html/examples/html_links_examples.cfm">More Link Examples...</a></div>
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()) {
attributes.add(m2.group(1));
}
if (!html.containsKey(m.group(2))) {
html.put(m.group(2), attributes);
} else {
attributes.addAll(html.get(m.group(2)));
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.