正則表達式聯接元素（如果彼此緊鄰）

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, ''));

Regex語句在連接彼此相鄰的<span>標記時，應該這樣，以便如果兩個span標記彼此直接相鄰，則成為一個span ，但是Regex並不將連接限制為僅在他們直接彼此相鄰。

因此，基本上，我如何才能將正則表達式更改為僅在跨度標記彼此直接相鄰時才加入它們。

Answer 1

非常簡單，替換為：
HVleftPanelContent.html(txt.replace(/<\\/span>(?:\\s)*<span class="highlight">/g, ''));

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

問題是(?:\\s)* ，這意味着匹配任何空格0次或更多次，這意味着它也將匹配用空格分隔的跨度。