如何用特殊字符包装选定的文本并在 contenteditable div 中展开简单？答案

【问题标题】：how to wrap selected text with special character and unwrap in contenteditable div Simple?如何用特殊字符包装选定的文本并在 contenteditable div 中展开简单？
【发布时间】：2013-11-27 07:10:23
【问题描述】：

答案中没有给出任何类型的插件参考。我正在使用插件所见即所得的编辑器。

function blanks(){
    wrap("*");
}

function wrap(tag) {
    var sel, range;
    var selectedText;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            selectedText = range.toString();
            range.deleteContents();
            range.insertNode(document.createTextNode('|' + tag + selectedText + tag + '|'));
        }
    }
    else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        selectedText = document.selection.createRange().text + "";
        range.text = '|' + tag + selectedText + tag + '|';
    }

Ref like that stackoverflow comment box text selected bold and remove bold.

【问题讨论】：

您能否给我们一个包含每个组件（js、html、css）的代码的 jsFiddle。我认为说像 SO 那样做是不够的。

标签： javascript html contenteditable getselection

【解决方案1】：

我没有能力用具体的方法来回答这个问题，但从概念上来说，这是一项简单的任务。

contenteditable 容器的内容可以简化为字符串。字符串是字符的列表。每个字符在此列表中都有一个位置或索引。

索引通常是从零开始的，所以我们假设在这种情况下。

如果您想用特定值 CHAR 包装一系列字符，它可能看起来像这样：

var result = string.slice(0, index) + CHAR + string.slice(index, size) + CHAR + string.slice(index + size);

其中index 是第一个字符的位置，size 是选择的字符数。

【讨论】：