正则表达式连接元素如果直接相邻

Question

我有以下脚本允许我选择文本，然后通过将所选文本包装在span标记中来直观地突出显示它。

这通常可以正常工作，但是如果有一个高亮标记与另一个高亮标记仅被一个空格分开，它会将两个高光连接在一起。

的Javascript

var HVleftPanelContent = $("#highlight-view .top .content");
    HVoutputUl = $("#highlight-view .contentBottom ul");

$("p").on("copy", highlight);

function highlight() {
    var text = window.getSelection().toString();
    var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var textStr = selectedText.textContent;
    if (textStr == "\n") {
        clearSelection();
        return false;
    } else if (textStr[textStr.length - 1] == "\n") {
        textStr = textStr.slice(0, -1);
        var reg = new RegExp("\n", "g");
        textStr = textStr.replace(reg, "\n<b data='&#xa;'></b>") + "\n";
    } else if (textStr.indexOf("\n") >= 0) {
        var reg = new RegExp("\n", "g");
        textStr = textStr.replace(reg, "\n<b data='&#xa;'></b>");
    }
    var span = $("<span class='highlight'>" + textStr + "</span>");
    selection.insertNode(span[0]);
    if (selectedText.childNodes[1] != undefined) {
        $(selectedText.childNodes[1]).remove();
    }
    var txt = HVleftPanelContent.html();
    HVleftPanelContent.html(txt.replace(/<\/span>(?:\s)*<span class="highlight">/g, ''));
    HVoutputUl.html("");
    $("#highlight-view .top .content .highlight").each(function () {
        $("#highlight-view .contentBottom ul").append("<li><span>" + $(this).html() + "</span></li>");
    });
    saveIt();
    clearSelection();
}

小结

如果HTML看起来像这样：

This is a short paragraph

我突出显示“是”，标记更改为：

This <span>is</span> a short paragraph

然后我突出显示“this”或“a”，标记错误地改为：

This <span>isa</short> paragraph

而不是它应该如何改变：

This <span>is</span> <span>a</span> paragraph

潜在问题

我认为这个问题存在于这一行：

HVleftPanelContent.html(txt.replace(/<\/span>(?:\s)*<span class="highlight">/g, ''));

正则表达式语句加入彼此相邻的<span>个标记时，如果两个span标记直接彼此相邻，则应该这样做变成一个span，但正则表达式并不仅限于加入时，只有当他们直接彼此相邻时。

所以，基本上，如果它们直接相邻，我怎样才能将Regex更改为仅加入span标签。

Answer 1

相当简单，替换：
HVleftPanelContent.html(txt.replace(/<\/span>(?:\s)*<span class="highlight">/g, ''));

使用：
HVleftPanelContent.html(txt.replace(/<\/span><span class="highlight">/g, ''));

问题是(?:\s)*，这意味着匹配任何空格0次或更多次，这意味着它甚至会匹配用空格分隔的跨度。