使用preg_replace通过鼠标包装突出显示的文本

Is there a way to use these buttons that spit out a specific text, but put them around (wrap) the highlighted text (by mouse)?

I have no idea how to do that and Google wasn't helping either. I am using Wordpress by the way.

$(".ztn").on("click", function () {
    var setText = $("#commentext").val()+" (zie: )";
    $("#commentext").val(setText);
});
$(".btn").on("click", function () {
    var setText = $("#commentext").val()+" ` `";
    $("#commentext").val(setText);
});

And this my code in functions.php:

function replace_content($content)
{
$content = preg_replace('#\(check: (.*?)\)#', "(check: <a class='zak' href='".site_url()."/$1/'>$1</a>)", $content);
preg_match("#class='zak' href='(.*?)'#", $content, $link);
if(count($link)>0){
$link = $link[1];
$link = preg_replace("# #", "-", $link);
$content = preg_replace("#class='zak' href='(.*?)'#", "class='zak' href='".$link."'", $content);
}
$content = preg_replace('#`(.*?)`#', "<a class='zbk' href='".site_url()."/$1/'>$1</a>", $content);
preg_match("#class='zbk' href='(.*?)'#", $content, $link1);
if(count($link1)>0){
$link1 = $link1[1];
$link1 = preg_replace("# #", "-", $link1);
$content = preg_replace("#class='zbk' href='(.*?)'#", "class='zbk' href='".$link1."'", $content);
}
return $content;
}

And:

  <button type="button" class="btn btn-defaul ztn">button 1</button><button type="button" class="btn-default btn">button 2</button></div>

Now, when I highlight a text by my mouse and click on this button, it is not being wrapped. The text that is being outputted after clicking the button, is just placed on top of the input field, while I want it to wrap the highlighted text.