javascript - 正则表达式连接元素(如果彼此直接相邻)

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

我突出显示“is”，标记更改为:

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 ，但正则表达式并不限制仅当它们直接彼此相邻时才加入。

所以，基本上，如何更改正则表达式以仅连接彼此直接相邻的跨度标签。

Answer 1

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

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

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