wrap selected text inside div in stars vuejs

Question

Hello everyone I'm trying to wrap the selected text inside a text area between 2 stars Entry would be for example vuejs => ** vuejs ** . Though I didn't figure out how to make the selected text wrapped with stars only.

    //this is my text area object
    <textarea class="outline-none w-100" id="textAreaExample3" rows="4" placeholder="taper 
    votre texte" ></textarea>
    //this is the method that gets triggered on a button click when the text gets selected
    makeSelectedTextBold(){
    let text = document.getElementById('question').innerText;
    // selected text
    let selection = window.getSelection().anchorNode.data;
    console.log(selection)
    // wrap text to be shown on button click (I couldn't figure this out can someone help me)
   
    },

Answer 1

This will help with the HTML:

<button id="button" onclick="makeSelectedTextBold()">here<button>
<textarea class="outline-none w-100" id="textAreaExample3" rows="4" placeholder="taper votre texte" ></textarea>

This will help with the JS:

document.getElementById("button").addEventListener("click");
function makeSelectedTextBold(){
    let text = document.getElementById("textAreaExample3").value;
    console.log("text:" + text)
    let selection = window.getSelection();
    console.log("selection:" + selection)
 }    

And this should help with finding and replacing the text: Find and Replace for an Textarea

Answer 2

I don't quite understand what you're trying to do. Make ALL the text in the text area bold, or make the text appear in a console log in bold?