MWPW-157292: CC and DC: Phone number links wrong

libs/features/placeholders.js

@@ -118,7 +118,8 @@ export async function replaceText(
   // The .shift method is very slow, thus using normal iterator
   let i = 0;
   // eslint-disable-next-line no-plusplus
-  const finalText = text.replaceAll(regex, () => placeholders[i++]);
+  let finalText = text.replaceAll(regex, () => placeholders[i++]);
+  finalText = finalText.replace(/ /g, '\u00A0');
   return finalText;
 }
 
@@ -130,9 +131,13 @@ export async function decoratePlaceholderArea({
   if (!nodes.length) return;
   const config = getConfig();
   await fetchPlaceholders({ placeholderPath, config, placeholderRequest });
-  const replaceNodes = nodes.map(async (textNode) => {
-    textNode.nodeValue = await replaceText(textNode.nodeValue, config);
-    textNode.nodeValue = textNode.nodeValue.replace(/ /g, '\u00A0');
+  const replaceNodes = nodes.map(async (nodeEl) => {
+    if (nodeEl.nodeType === Node.TEXT_NODE) {
+      nodeEl.nodeValue = await replaceText(nodeEl.nodeValue, config);
+    } else if (nodeEl.nodeType === Node.ELEMENT_NODE) {
+      const hrefVal = await replaceText(nodeEl.getAttribute('href'), config);
+      nodeEl.setAttribute('href', hrefVal);
+    }
   });
   await Promise.all(replaceNodes);
 }

libs/utils/utils.js

@@ -760,23 +760,21 @@ export async function customFetch({ resource, withCacheRules }) {
 
 const findReplaceableNodes = (area) => {
   const regex = /{{(.*?)}}|%7B%7B(.*?)%7D%7D/g;
-  const walker = document.createTreeWalker(
-    area,
-    NodeFilter.SHOW_TEXT,
-    {
-      acceptNode(node) {
-        const a = regex.test(node.nodeValue)
-          ? NodeFilter.FILTER_ACCEPT
-          : NodeFilter.FILTER_REJECT;
-        regex.lastIndex = 0;
-        return a;
-      },
-    },
-  );
+  const walker = document.createTreeWalker(area, NodeFilter.SHOW_ALL);
   const nodes = [];
   let node = walker.nextNode();
   while (node !== null) {
-    nodes.push(node);
+    let matchFound = false;
+    if (node.nodeType === Node.TEXT_NODE) {
+      matchFound = regex.test(node.nodeValue);
+    } else if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('href')) {
+      const hrefValue = node.getAttribute('href');
+      matchFound = regex.test(hrefValue);
+    }
+    if (matchFound) {
+      nodes.push(node);
+      regex.lastIndex = 0;
+    }
     node = walker.nextNode();
   }
   return nodes;

test/utils/mocks/body.html

@@ -54,6 +54,9 @@
     <p>I'm not a blockhead.</p>
     <p>{{&nbsp;inkl. MwSt.}}</p>
   </div>
+  <div>
+    <a href="tel:%7B%7Bphone-number-substance%7D%7D" class="placeholder"><sup>{{phone-number-substance}}</sup></a>
+  </div>
   <!-- picture element with poster video -->
   <div>
     <picture>

test/utils/utils.test.js

@@ -230,6 +230,9 @@ describe('Utils', () => {
       const paragraphs = [...document.querySelectorAll('p')];
       const lastPara = paragraphs.pop();
       expect(lastPara.textContent).to.equal(' inkl. MwSt.');
+      const plceholderhref = document.querySelector('.placeholder');
+      const hrefValue = plceholderhref.getAttribute('href');
+      expect(hrefValue).to.equal('tel:phone number substance');
     });
 
     it('Decorates meta helix url', () => {