dom - Javascript get text from child within child

Question

I'm busy developing a wordpress plugin to look for numbers and hide them by formating the number and replacing it with 0000..., Example:

<a href="tel:0000000000">
   <span>
      <span>0000 000 000</span>
   </span>
</a>

I have javascript that queries the <a href=""> tag. I then get the children of the a tag. However, my issue is that because I don't know what or how many children ill be working with i can't assume it will be 1 or 2 thus I have to predict and look for it.

Javascript code:

// REMOVE SPACES IN STRING
let replaceStr = function (self) {
    let value = self.replace(/[- )(]/g, '')
    return value
};
// REMOVE LETTERS FROM STRING 
let rmLetters = function (self) {
    // let value = self.replace( /^D+/g, '')
    let value = self.replace(/D+%?/g, "");
    return value
}

let a = document.querySelectorAll("a[href^='tel:'], a[href^='Tel:'], a[href^='callto:']");
for (var i = 0; i < a.length; i++) {
    let hrefSlice = a[i].href.slice(4);
    let countChildren = a[i].childElementCount
    if (a[i].hasChildNodes()) {
        let a_childNodes = a[i].children;
        if (a_childNodes.length > 1) { 
            for (let l = 0; l < a_childNodes.length; l++) {
                if (replaceStr(a_childNodes[l].textContent) === hrefSlice) {
                    a_childNodes[l].textContent = replaceStr(a_childNodes[l].textContent).slice(0, 4) +
                            "...Click Here";
                } else if (replaceStr(rmLetters(a_childNodes[l].textContent)) === hrefSlice) {
                    a_childNodes[l].textContent = replaceStr(rmLetters(a_childNodes[l].textContent)).slice(
                            0, 4) + "...Click Here";
                    }
                }
            }
        }
    }
}
  

question from:https://stackoverflow.com/questions/65946402/javascript-get-text-from-child-within-child

Answer 1

Not sure if I got you right but I'd do it like this:

document.querySelector('#hideButton').addEventListener('click', () => {
  const phoneAnchors = document.querySelectorAll('a[href^="tel:"], a[href^="Tel:"], a[href^="callto:"]');
  
  phoneAnchors.forEach((phoneAnchor) => {
    const phoneNumber = phoneAnchor.href.split(':')[1] || '';
    
    phoneAnchor.href = phoneAnchor.href.replace(/[0-9]/g, '0');
    
    phoneAnchor.querySelectorAll('*').forEach(childNode => {
      if (childNode.textContent.replace(/[ ]/g, '') === phoneNumber) {
        childNode.textContent = childNode.textContent.replace(/[0-9]/g, '0');
      }
    });
  });
});

a {
  display: block;
}

<a href="tel:1234567890">
  <span>
    <span>1234 567 890</span>
  </span>
</a>

<a href="tel:0987654321">
  <span>
    <span>0987 654 321</span>
  </span>
</a>

<a href="tel:1122334455">
  <span>
    <span>1122334455</span>
  </span>
</a>

<hr>

<button id="hideButton">Hide Phone Numbers</button>