1

我有以下脚本，它允许我选择文本，然后通过将所选文本包装在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标签直接相邻，它就会变成 one span，但 Regex 并没有将连接限制为仅当它们直接相邻时对彼此。

所以，基本上，如果它们直接相邻，我如何才能将正则表达式更改为仅加入跨度标签。

4

1 回答 1

1

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

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

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

于 2013-06-09T09:10:36.553 回答