diff --git a/www/js/app.js b/www/js/app.js
index c0e54c38..3bf48316 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -2256,7 +2256,8 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'images', 'cooki
             var listLength = dirEntryArray.length < MAX_SEARCH_RESULT_SIZE ? dirEntryArray.length : MAX_SEARCH_RESULT_SIZE;
             for (var i = 0; i < listLength; i++) {
                 var dirEntry = dirEntryArray[i];
-                articleListDivHtml += '<a href="#" dirEntryId="' + dirEntry.toStringId().replace(/'/g, '&apos;') +
+                var dirEntryStringId = uiUtil.htmlEscapeChars(dirEntry.toStringId());
+                articleListDivHtml += '<a href="#" dirEntryId="' + dirEntryStringId +
                     '" class="list-group-item">' + dirEntry.getTitleOrUrl() + '</a>';
             }
             articleListDiv.innerHTML = articleListDivHtml;
diff --git a/www/js/lib/uiUtil.js b/www/js/lib/uiUtil.js
index a8518025..d50f8ed4 100644
--- a/www/js/lib/uiUtil.js
+++ b/www/js/lib/uiUtil.js
@@ -500,6 +500,29 @@ define(['util'], function(util) {
             return rect.top < window.innerHeight + (offset > 0 ? offset : 0) && rect.bottom > 0 + (offset < 0 ? offset : 0) && rect.left < window.innerWidth && rect.right > 0;
     }
 
+    /**
+     * Encodes the html escape characters in the string before using it as html class name,id etc.
+     * 
+     * @param {String} string The string in which html characters are to be escaped
+     * 
+     */
+    function htmlEscapeChars(string) {
+        var escapechars = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#39;',
+            '/': '&#x2F;',
+            '`': '&#x60;',
+            '=': '&#x3D;'
+        };
+        string = String(string).replace(/[&<>"'`=/]/g, function (s) {
+            return escapechars[s];
+        });
+        return string;
+    }
+
     /**
      * Functions and classes exposed by this module
      */
@@ -519,6 +542,7 @@ define(['util'], function(util) {
         displayFileDownloadAlert: displayFileDownloadAlert,
         insertBreakoutLink: insertBreakoutLink,
         extractHTML: extractHTML,
-        systemAlert: systemAlert
+        systemAlert: systemAlert,
+        htmlEscapeChars: htmlEscapeChars
     };
 });