use DOMParser instead of regex to get text from html

Author: craftamap

src/background/background.js

@@ -1,6 +1,7 @@
 import browser from 'webextension-polyfill'
 import api from './api/owncast'
 import Storage from './util/storage'
+import stripHtml from '../shared/util/stripHtml'
 import urlcat from 'urlcat'
 
 function dateDiff (timestamp, structure = dateDiff.structure) {
@@ -80,7 +81,7 @@ const sendNotifications = async (oldData, newData) => {
 			browser.notifications.create({
 				type: 'basic',
 				title: item.name + ' is online',
-				message: item.description.replace(/<\/?[^>]+>/ig, ' '),
+				message: stripHtml(item.description),
 				iconUrl: item.logo,
 			})
 		})

src/popup/components/Instance.vue

@@ -25,7 +25,7 @@
             >{{ instance.status }}</span></a>
         </div>
         <div class="instance-text-description">
-          {{ instance.description | stripHTML }}
+          {{ instanceDescription }}
         </div>
         <div class="instance-icon-bar">
           <div id="left">
@@ -71,6 +71,7 @@
 </template>
 
 <script>
+import stripHtml from '../../shared/util/stripHtml'
 import ViewerIcon from './icons/ViewerIcon.vue'
 import UptimeIcon from './icons/UptimeIcon.vue'
 import RemoveIcon from './icons/RemoveIcon.vue'
@@ -82,11 +83,6 @@ export default {
 		UptimeIcon,
 		RemoveIcon,
 	},
-	filters: {
-		stripHTML: function (string) {
-			return string.replace(/<\/?[^>]+>/ig, ' ')
-		},
-	},
 	props: {
 		instance: {
 			type: Object,
@@ -104,6 +100,9 @@ export default {
 				'background-image': 'url(' + (this.instance.online ? this.instance.thumbnail : this.instance.logo) + ')',
 			}
 		},
+		instanceDescription () {
+			return stripHtml(this.instance.description)
+		},
 	},
 	methods: {
 		toggleRemove () {

src/shared/util/stripHtml.js

@@ -0,0 +1,10 @@
+/**
+ * Extracts the plain text of a string containing html
+ * @param {string} html html to extract text from
+ * @returns {string} text without html tags
+ */
+export default function stripHtml (html) {
+	const parser = new DOMParser()
+	const doc = parser.parseFromString(html, 'text/html')
+	return doc.querySelector('body').innerText
+}