how can I remove words selected (highlighted) and insert html element instead in ckeditor

how can I remove words selected (highlighted) and insert html element instead

for example "<p>this is long text</p>" need to change "long" with "<test class = "something">short</test>" (custom attribute if possible)

this is how far I got so far the below insert words where the courser at, I need to remove the selected words and add the new words in this form "<test class = "something">short</test>"

  this.testEditor.model.change(writer => {
  var selection = this.testEditor.model.document.selection;
  var position = selection.getFirstPosition();
  // copy attributes of selected element
  var attributes = { 'bold': true};
  if (position.parent.childCount > 0) {
    var element = position.parent.getChild(0);
    attributes = element.getAttributes();
  }
  writer.insertText('text_to_insert', attributes, position);
});