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

Question

我正在开发自定义 CMS，并且希望能够选择显示的 HTML 部分以在文本区域中进行编辑，并将任何封闭标签替换为另一个标签。例如，我可能想选择一个段落元素并单击一下将其转换为 h3，而其他任何标签都保持不变。

我已经实现了rangyinputs 以允许对 textareas 进行 getSelection/replaceSelectedText 操作，到目前为止我有这个：

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

这可以正常工作，但它会从目标文本中删除所有标签，而不仅仅是封闭的标签，因此所选文本中的任何其他标签也将被删除。

任何想法，我认为它只涉及更改替换语句中的正则表达式。由于 textarea 只包含纯文本，我不能使用 jQuery 方法，例如 unwrap。显然在 HTML 上做这样的正则表达式操作很容易出错，但现在我假设用户正确选择了文本！

Answer 1

此演示将“A”标签转换为“LINK”标签；无效，但显示了您描述的功能：

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");