use regular expressions to match the contents before the first parenthesis and after the last parenthesis, and then concatenate the value itself in the middle.

I wonder if that's what it means? There seems to be nothing complicated. Do I misunderstand?

<input type='text' id='in'/>
<ul>
<li onclick='return endClick();'>(:)</li>
<li>(:)</li>
</ul>
<script>
function endClick(){
let v=document.getElementById('in').value;
if(v=='')document.getElementById('in').value='(:)';
else
    document.getElementById('in').value="("+ v+")";
}
</script>

looked at the problem again and found that I did get it wrong, but I think the problem needs to be understood from the user's point of view. If you want to replace the contents in parentheses, when there are multiple parentheses, which level of parentheses to replace becomes a problem. You also need to know where the cursor stays and the addition component loses focus. Can you still get the cursor position? Or do you want the user to select the part to replace? In any case, the logic and complexity will increase, but it is not as simple and straightforward as the current one, using the current value as a parameter to apply the selected formula. In addition, if we want to do the complex formula mentioned above, a simple input may not be enough.