@pocketprep/ui-kit 3.4.77 → 3.4.79

package/lib/components/Quiz/Question/ChoicesContainer.vue

@@ -119,7 +119,7 @@
                                 ? 'Correct Answer, '
                                 : 'Incorrect Answer, '
                             : ''
-                    }${ stripText(choice.text) }`"
+                    }${ stripHtmlTags(choice.text) }`"
                     v-html="choice.text"
                 />
                 <PocketButton
@@ -334,11 +334,15 @@ export default class ChoicesContainer extends Vue {
     } }) breakpoints!: TBreakPointsObject
     @Prop({ default: [] }) keywordDefinitions!: { keyword: string; definition: string }[]
 
-    stripText (string?: string) {
-        return string?.replace(/<[^\s>]+[^>]*>/gi, ' ').trim()
+    stripHtmlTags (string?: string) {
+        if (string) {
+            const div = document.createElement('div')
+            div.innerHTML = string
+            return div.textContent || ''
+        }
+        return ''
     }
 
-
     @Emit('emitChoiceFocusIn')
     emitChoiceFocusIn (choiceKey: TChoiceKey) {
         return choiceKey

package/lib/components/Quiz/Question/MobileMatrixChoicesContainer.vue

@@ -48,7 +48,7 @@
                         class="uikit-question-mobile-matrix-choices-container__row-label"
                         v-dark="isDarkMode"
                     >
-                        {{ stripText(rowLabel) }}
+                        {{ stripHtmlTags(rowLabel) }}
                         <Icon
                             class="uikit-question-mobile-matrix-choices-container__toggle-row-icon"
                             :class="{
@@ -78,8 +78,8 @@
                                 >
                                     {{ selectedColumnHeaders[rowIndex][colHeaderIndex] === 
                                         selectedColumnHeaders[rowIndex][selectedColumnHeaders[rowIndex].length - 1] ?
-                                            stripText(selectedColumnHeaders[rowIndex][colHeaderIndex]) : 
-                                            `${stripText(selectedColumnHeaders[rowIndex][colHeaderIndex])},`
+                                            stripHtmlTags(selectedColumnHeaders[rowIndex][colHeaderIndex]) : 
+                                            `${stripHtmlTags(selectedColumnHeaders[rowIndex][colHeaderIndex])},`
                                     }}
                                 </div>
                             </template>
@@ -127,7 +127,7 @@
                                     matrixChoiceLayout[rowIndex][columnIndex]?.startsWith('d'),
                             }"
                         >
-                            {{ stripText(column) }}
+                            {{ stripHtmlTags(column) }}
                         </div>
                     </div>
                 </div>
@@ -204,8 +204,13 @@ export default class MobileMatrixChoicesContainer extends Vue {
     selectedColumnHeaders: string[][] = []
     brandColors = BrandColors
 
-    stripText (string?: string) {
-        return string?.replace(/<[^\s>]+[^>]*>/gi, ' ').trim()
+    stripHtmlTags (string?: string) {
+        if (string) {
+            const div = document.createElement('div')
+            div.innerHTML = string
+            return div.textContent || ''
+        }
+        return ''
     }
 
     get defaultCheckboxGrid () {

package/lib/components/Quiz/Question/MobileMatrixRadioGroup.vue

@@ -40,8 +40,13 @@ const radioButtonColor = (choice: string) => {
     return 'blue'
 }
 
-const stripText = (string?: string) => {
-    return string?.replace(/<[^\s>]+[^>]*>/gi, ' ').trim()
+const stripHtmlTags = (string?: string) => {
+    if (string) {
+        const div = document.createElement('div')
+        div.innerHTML = string
+        return div.textContent || ''
+    }
+    return ''
 }
 </script>
 
@@ -78,7 +83,7 @@ const stripText = (string?: string) => {
                 }"
                 @click="!disabled && !showAnswers && selectChoice(choice)"
             >
-                {{ stripText(labels[index]) }}
+                {{ stripHtmlTags(labels[index]) }}
             </div>
         </li>
     </ul>

package/lib/utils.ts

@@ -66,6 +66,10 @@ export const studyModes = {
     },
 } as const
 
+export const escapeRegex = (string: string) => {
+    return string.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&')
+}
+
 export const highlightKeywordsInText = (params: {
     text: string
     keywordDefinitions: { keyword: string }[]
@@ -79,7 +83,7 @@ export const highlightKeywordsInText = (params: {
     const keywords = params.keywordDefinitions.map(k => k.keyword)
 
     return keywords.reduce((acc, word) => {
-        const regex = new RegExp(`(\\W)(${word})(\\W)`, 'i')
+        const regex = new RegExp(`(\\W)(${escapeRegex(word)})(\\W)`, 'i')
         return acc.replace(
             regex, 
             `$1<span class="keyword-highlight${params.isDarkMode 
@@ -89,4 +93,4 @@ export const highlightKeywordsInText = (params: {
                 <span style="pointer-events: none;">$2</span></span>$3`
         )
     }, params.text)
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.77",
+  "version": "3.4.79",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {