diff --git a/www/js/app.js b/www/js/app.js
index fe4bd8c1..9c93c5b0 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -3754,16 +3754,20 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
             var hatnote;
             var hatnotes = [];
             do {
-                hatnote = htmlArticle.match(/<h1\b(?:[^<]|<(?!h2))+?((?:<div\s+[^>]+\b(?:hatnote|homonymie|dablink)\b[\s\S]+?<\/div>\s*)+)/i);
-                if (hatnote) {
-                    htmlArticle = htmlArticle.replace(hatnote[1], '');
-                    hatnotes.push(hatnote[1]);
+                hatnote = util.matchOuter(htmlArticle, '<div\\b[^>]+\\b(?:hatnote|homonymie|dablink)\\b', '</div>\\s*', 'i');
+                if (hatnote && hatnote.length) {
+                    // Ensure the next matching hatnote is under h1
+                    if (/(?:<h1\b(?:[^<]|<(?!h2))+?)<div\s+[^>]+\bhatnote|homonymie|dablink\b/i.test(htmlArticle)) {
+                        htmlArticle = htmlArticle.replace(hatnote[0], '');
+                        hatnotes.push(hatnote[0]);
+                    } else {
+                        break;
+                    }
                 }
-            } while (hatnote);
-            if (hatnotes.length) {
-                hatnotes.forEach(function (hnt) {
-                    htmlArticle = htmlArticle.replace(/(<\/h1>\s*)/i, "$1" + hnt.replace(/(<div\s+)/i, '$1style="padding-top:10px;" '));
-                });
+            } while (hatnote.length);
+            // Ensure we replace them in the right order
+            for (var i = hatnotes.length; i--;) {
+                htmlArticle = htmlArticle.replace(/(<\/h1>\s*)/i, "$1" + hatnotes[i].replace(/(<div\s+)/i, '$1style="padding-top:10px;" '));
             }
             // Put misplaced disambiguation header back in its correct position @TODO remove this when fixed in mw-offliner
             var noexcerpt = htmlArticle.match(/<h1\b(?:[^<]|<(?!h2))+?(<dl\b(?:[^<]|<(?!\/dl>)){1,50}?(?:For\sother\splaces\swith\sthe\ssame\sname|Not\sto\sbe\sconfused\swith|mw-redirect[^<]+travel\stopic|This\sarticle\sis\sa|See\salso:)(?:[^<]|<(?!\/dl>))+<\/dl>\s*)/i);
diff --git a/www/js/lib/util.js b/www/js/lib/util.js
index 8238a5e1..b22a0844 100644
--- a/www/js/lib/util.js
+++ b/www/js/lib/util.js
@@ -408,16 +408,17 @@ define([], function() {
      * @param {string} left - Regex string of opening pattern to match, e.g. '<table\\b[^>]*>' matches <table> or <table ...>. 
      * @param {string} right - Regex string of closing pattern to match, e.g. '</table>'. Must not be equal to left.
      * @param {string} flags - Regex flags, if any, such as 'gi' (= match globally and case insensitive).
+     * @param {string} prefix - An optional Regex string that must be present before <left> for the regex to match
      * @returns {Array} An array of matches.
      */
-    function matchOuter(str, left, right, flags) {
+    function matchOuter(str, left, right, flags, prefix) {
         flags = flags || "";
         var f = flags.replace(/g/g, ""),
             g = flags.indexOf("g") > -1,
             l = new RegExp(left, f),
             //Creates a neutral middle value if left is a well-formed regex for an html tag with attributes
             mid = /^(<[^\\]+)\\/.test(left) ? left.replace(/^(<[^\\]+)[\S\s]+$/, "$1") + '\\b[^>]*>' : "",
-            x = new RegExp((mid ? mid : left) + "|" + right, "g" + f),
+            x = new RegExp((prefix ? prefix : '') + (mid ? mid : left) + "|" + right, "g" + f),
             a = [],
             t, s, m;
         mid = mid ? new RegExp(mid, f) : l;