javascript - 在 javascript 中查找正则表达式电话号码并将其替换为可调用链接

Question

我正在尝试使用 JavaScript 将电话号码替换为可调用链接。当我尝试 console.log 我的逻辑时，它工作正常，我看到了我的结果，但我看不到页面上更新的文本。这是我的代码。 https://jsfiddle.net/uyuet2fr/2/

console.log(document.getElementsByClassName("left-border")[0].style.background("red"));


function changeText(){
document.getElementsByClassName("left-border")[0].innerHTML("ttt")
var a = document.getElementsByClassName("left-border")[0].innerHTML;
  a = a.replace(/\b\d{3}[-.]?\d{3}[-.]?\d{4}\b/g, replaceStr);
    function replaceStr(str) {
    return "<a hre='tel:"+str+"'>"+str+"</a>";
    }
  return a
}
//Replace phone numbers with link to call - like <a href="tel:202-603-0057">202-603-0057</a>
window.document.onload = changeText;


<div class="left-border">
<h2 class="bottom-pad">Contact Information</h2>
                        <div>
                            <h3>After Hours Contact</h3>        
                            Steve Rmer<br>
stacie.reimer@domain.org<br>
231-603-0057<br>
                            <h3>Law Enforcement Officer Contact</h3>
                            Sb E Rkl<br>
sb.rhk@domain.org<br>
240-257-6492<br>
                            <h3>Referral Contact</h3>
                            Yhk E Reer<br>
yhk.reer@domain.org<br>
240-257-6492                            
                            <h3>Other Contacts</h3>
                                <div>Yhn Buer<br>
yhk.buer@domain.org<br>
231-836-7976<br>
</div><br>
                                <div>Erac Lanu<br>
erac.lanu@domain.org<br>
231-780-7725<br>
</div><br>
                                <div>Pul Fore<br>
pul.fore@domain.org<br>
240-273-4617<br>
</div><br>                                                  </div>
</div>

Answer 1

更改window.onload而不是window.document.onload。并将替换的文本添加到同一元素innerHTML中。以及innerHTML('fff') 其语法错误

function changeText() {
  var a = document.getElementsByClassName("left-border")[0]
  a.innerHTML = a.innerHTML.replace(/\b\d{3}[-.]?\d{3}[-.]?\d{4}\b/g, replaceStr);
  function replaceStr(str) {
    return "<a hre='tel:" + str + "'>" + str + "</a>";
  }
}

window.onload = changeText; 

a{
color:blue;
}

<div class="left-border">
  <h2 class="bottom-pad">Contact Information</h2>
  <div>
    <h3>After Hours Contact</h3>
    Steve Rmer<br> stacie.reimer@domain.org
    <br> 231-603-0057
    <br>
    <h3>Law Enforcement Officer Contact</h3>
    Sb E Rkl<br> sb.rhk@domain.org
    <br> 240-257-6492
    <br>
    <h3>Referral Contact</h3>
    Yhk E Reer<br> yhk.reer@domain.org
    <br> 240-257-6492
    <h3>Other Contacts</h3>
    <div>Yhn Buer<br> yhk.buer@domain.org
      <br> 231-836-7976
      <br>
    </div><br>
    <div>Erac Lanu<br> erac.lanu@domain.org
      <br> 231-780-7725
      <br>
    </div><br>
    <div>Pul Fore<br> pul.fore@domain.org
      <br> 240-273-4617
      <br>
    </div><br> </div>
</div>