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

Question

Heres the html -:

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

Now how to i wrap the sub-string which starts at index 7 to index 17 with a paragraph tag, so that the result is like this -: <div contenteditable="true">I am a <p>good person</p> </div>

Answer 1

Somethinng like:

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

The above will replace all instances of subString in sourceString.

Important If subString can contain arbitrary text you'll need to quote subString. See: How to escape regular expression in javascript?

And a less generic implementation:

// 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) : "");
}

Here's a sample call using jquery:

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