picocrank 1.22.0 → 1.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.22.0",
+  "version": "1.22.1",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {

package/vue/components/QuickSearch.vue

@@ -362,11 +362,35 @@ function selectItem(item) {
   close()
 }
 
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
 function highlightText(text, query) {
-  if (!query || !text) return text
+  if (text == null || text === '') return ''
+
+  const source = String(text)
+  if (!query) return escapeHtml(source)
+
+  const regex = new RegExp(query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi')
+  let result = ''
+  let lastIndex = 0
+
+  for (const match of source.matchAll(regex)) {
+    const start = match.index
+    const matched = match[0]
+    result += escapeHtml(source.slice(lastIndex, start))
+    result += `<mark>${escapeHtml(matched)}</mark>`
+    lastIndex = start + matched.length
+  }
 
-  const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi')
-  return text.replace(regex, '<mark>$1</mark>')
+  result += escapeHtml(source.slice(lastIndex))
+  return result
 }
 
 function addItem(item) {