Renaming javascript objects on the basis of match and overwrite the old object keys

Question

I am having an array for which i m calculating the count of every unique array element. array is stored as arr after that i have used a created a function to calculate the values of all uniques.

<script>
var arr = [ '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="https://mobile.twitter.com" rel="nofollow">Twitter Web App</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="http://twitter.com" rel="nofollow">Twitter Web Client</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="http://www.facebook.com/twitter" rel="nofollow">Facebook</a>',
  '<a href="https://mobile.twitter.com" rel="nofollow">Twitter Web App</a>',
  '<a href="http://twitter.com/download/iphone" rel="nofollow">Twitter for iPhone</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="https://mobile.twitter.com" rel="nofollow">Twitter Web App</a>',
  ]
arr1 = arr.sort()
var uniqs = arr1.reduce((acc, val) => {
  acc[val] = acc[val] === undefined ? 1 : acc[val] += 1;
  return acc;
}, {});
console.log(uniqs)

</script>

what i get

<a href="http://twitter.com" rel="nofollow">Twitter Web Client</a>: 1
<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>: 11
<a href="http://twitter.com/download/iphone" rel="nofollow">Twitter for iPhone</a>: 1
<a href="http://www.facebook.com/twitter" rel="nofollow">Facebook</a>: 1
<a href="https://mobile.twitter.com" rel="nofollow">Twitter Web App</a>: 3

and i want something like this

Web Client: 1 Android: 11 iPhone: 1 Facebook: 1 Web App: 3

Answer 1

While HTML is not a regular language (see meme-ish reference here: RegEx match open tags except XHTML self-contained tags), from those short tags you can really extract what you want using regex:

var arr = [ '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="https://mobile.twitter.com" rel="nofollow">Twitter Web App</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="http://twitter.com" rel="nofollow">Twitter Web Client</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="http://www.facebook.com/twitter" rel="nofollow">Facebook</a>',
  '<a href="https://mobile.twitter.com" rel="nofollow">Twitter Web App</a>',
  '<a href="http://twitter.com/download/iphone" rel="nofollow">Twitter for iPhone</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>',
  '<a href="https://mobile.twitter.com" rel="nofollow">Twitter Web App</a>',
  ];
  
arr.forEach(function(tag){
  console.log(tag);
  console.log(tag.match(/<a.*>(Twitter )?(for )?(.*)<\/a>/)[3]);
});

(match() produces an array, containing the entire match in [0], and the groups in parentheses, so [1] is for Twitter and [2] is for for, or undefined when they are not present, and [3] is what you need).