javascript - 将带有段落标签的子字符串包装在内容可编辑 div 中的字符串中

Question

继承人的html-：

<div contenteditable="true">I am a good person</div>

现在我如何包装以段落标记开头的子字符串index 7 to index 17，以便结果如下所示 - ：<div contenteditable="true">I am a <p>good person</p> </div>

Answer 1

像这样的东西：

function wrapSubstring(sourceString, subString, tag) {
    return sourceString.replace(new RegExp("(" + subString + ")", "g"), "<" + tag" + ">$1</" + tag + ">");
}

以上将替换 sourceString 中 subString 的所有实例。

重要 如果 subString 可以包含任意文本，则需要引用 subString。请参阅：如何在 javascript 中转义正则表达式？

还有一个不太通用的实现：

// Wrap a subString of sourceString with the given tag
// starting at startIndex(inclusive) and going to endIndex(exclusive)
function wrapSubstring(sourceString, tag, startIndex, endIndex) {
    return sourceString.substring(0, startIndex)
        + "<" + tag + ">"
        + sourceString.substring(startIndex, endIndex)
        + "</" + tag + ">"
        + (endIndex ? sourceString.substring(endIndex) : "");
}

这是使用 jquery 的示例调用：

var $element = $('#someId');
$element.html(wrapSubstring($element.html(), 'p', 7, 17);