从textarea中的选择中删除封闭的html标签

Question

I am working on a custom CMS and want to be able to select a section of HTML displayed for editing in a textarea and replace any enclosing tags with another tag. For instance, I may want to select a paragraph element and turn it into an h3 with one click, leaving any other tags untouched.

I have implemented rangyinputs to allow getSelection/replaceSelectedText operations on textareas, and so far I have this:

function add_html_tag(target_ID, replace_tag) {
  $(target_ID).focus();
  $(target_ID).replaceSelectedText('<' + replace_tag + '>' + $(target_ID).getSelection().text.replace(/(<([^>]+)>)/ig,"") + '</' + replace_tag + '>');
}

This works OK but it removes ALL tags from the target text, not just the enclosing ones so any other tags within the selected text would also be removed.

Any ideas, I think it will just involve changing the regex in the replace statement. Since the textarea contains just plain text I can't use jQuery methods such as unwrap. Obviously doing regex operations like this on HTML is error prone, but for now I will presume users select the text correctly!

Answer 1

this demo turns "A" tags into "LINK" tags; invalid, but shows the functionality you describe:

function add_html_tag(target_ID, replace_tag, new_tag_name) {
  var elm=$("#"+target_ID).focus()[0];
  elm.value=elm.value.replace(  new RegExp("<(\\\/?)"+replace_tag+"\\b", "gi"), "<$1"+new_tag_name);
}

add_html_tag(textAreaID, "a", "link");