JSFiddle - React, Tailwind, and code Playground

HTML

<div id="departments">
    <ul>
        <li>Department 1 - (555) 123-1234</li>
        <li>Department 2 - (555) 123-4321</li>
        <li>Department 3 - (555) 123-6789</li>
    </ul>
</div>
<input type='text' value='(555) 123-6789' />
<a href='(555) 123-6789'>(555) 123-6789</a>

JavaScript

var regex = /((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}(?!([^<]*>)|(((?!<a).)*<\/a>))/g; 

var text = $("body:first").html();

text = text.replace(regex, "<a href=\"tel:$&\">$&</a>");
console.log(text);
$("body:first").html(text);