更新#2

好的，接下来会进行更多测试。当我使用人造间隔符时，代码看起来工作正常，但正则表达式最终失败了。具体来说，以下场景有效:

1. 选择 a 上方或下方的字词标签
2. 您只选择 a 正上方或下方的一行标签
3. 您在 a 上方/下方选择了不止一行标签
4. 您在任意 a 下方选择了不止一行标签

以下情况不起作用:

1. 您选择 a 以上的行/更多行标记，然后是 a 下面的行/更多行标签

当它“不起作用”时会发生什么，它会删除 a来自 DOM 的标记间隔符。这可能是正则表达式的问题...

基本上，当您选择 a 周围的文本时它会失败标签。

更新:

我不需要将每一行都包装在 p 中标签，我可以改用内联元素，例如 a , span , 或 label标签，带有 display:inline-block和一个高度+宽度作为一个新的行元素(<br />)。这应该可以更轻松地修改代码，因为唯一需要更改的部分是我在边界之间获取文本的地方。我只需要更改那部分，selectedText.textContent , 以检索也在边界内的 HTML 而不仅仅是文本。

我正在创建一个需要用户选择文本的 Phonegap。但是，我需要对文本选择进行精细控制，并且不能再将整个文本内容放入 pre 中。样式 p标签。相反，我需要用 <a class="space"></a> 之类的东西来表示换行符, 以便准确地突出显示正确的单词。当我的文本看起来像这样时:

<p class="text">This is line one

Line two

Line three
</p>

并且有.text{ white-space:pre-wrap } ，下面的代码允许我选择单词，然后用 span 包裹文本显示文本突出显示的元素:

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

function highlight() {
    var text = window.getSelection().toString();
    var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var span = $("<span class='highlight'>" + selectedText.textContent + "</span>");
    selection.insertNode(span[0]);
    if (selectedText.childNodes[1] != undefined) {
        $(selectedText.childNodes[1]).remove();
    }
    var txt = $('.text').html();
    $('.text').html(txt.replace(/<\/span>(?:\s)*<span class="highlight">/g, ''));
    $(".output ul").html("");
    $(".text .highlight").each(function () {
        $(".output ul").append("<li>" + $(this).text() + "</li>");
    });
    clearSelection();
}

function clearSelection() {
    if (document.selection) {
        document.selection.empty();
    } else if (window.getSelection) {
        window.getSelection().removeAllRanges();
    }
}

这段代码工作得很好，但当每一行都被一个间隔标记分隔时就不行了。新文本如下所示:

<p class="text">
    Line one
    <a class="space"></a>
    Line two
    <a class="space"></a>
    Line three
</p>

当我修改上面的代码以使用 <a class="space"></a> 表示的新行时，代码失败。它只检索选择的文本，而不是 HTML ( selectedText.textContent )。我不确定正则表达式是否也会因 a 而失败元素充当新行。 a元素可以是 span或 label ，或任何通常的内联定位元素，以欺骗 iOS 允许我选择字母而不是 block 元素。

是否有更改代码以保留新行元素的方法？

jsFiddle: http://jsfiddle.net/charlescarver/39TZ9/3/

所需的输出应如下所示:

如果突出显示文本“第一行”:

<p class="text">
    <span class="highlight">Line one</span>
    <a class="space"></a>
    Line two
    <a class="space"></a>
    Line three
</p>

如果突出显示文本“第一行第二行”:

<p class="text">
    <span class="highlight">Line one
    <a class="space"></a>
    Line two</span>
    <a class="space"></a>
    Line three
</p>

当然，不同的部分和单个字母也可以并且将被突出显示，而不是整行。

最佳答案

这是一个支持您要求的所有功能的解决方案:

HTML:

<p class="text">
    First Line
    <a class="space"></a>
    <a class="space"></a>
    Second Line
    <span class="space"></span>
    Third Line
    <label class="space"></label>
    Forth Line
</p>
<ul class="output"></ul>

CSS:

.space {
    display: inline-block;
    width: 100%;
}
.highlighting {
    background-color: green;
}

JavaScript:

var text,
    output,
    unwrapContents,
    mergeElements,
    clearSelection,
    clearHighlighting,
    mergeHighlighting,
    handleCopy;

unwrapContents = function unwrapContents(element) {
    while(element.firstChild !== null) {
        element.parentNode.insertBefore(element.firstChild, element);
    }
    element.parentNode.removeChild(element);
};

mergeElements = function mergeElements(startElement, endElement) {
    var currentElement;
    endElement = endElement.nextSibling;
    while((currentElement = startElement.nextSibling) !== endElement) {
        startElement.appendChild(currentElement);
    }
};

clearSelection = function clearSelection() {
    if (document.selection) {
        document.selection.empty();
    } else if (window.getSelection) {
        window.getSelection().removeAllRanges();
    }
};

clearHighlighting = function clearHighlighting(target, exception) {
    $('.highlighting', target).each(function(index, highlighting) {
        if(highlighting !== exception) {
            unwrapContents(highlighting);
        }
    });
    target.normalize();
};

mergeHighlighting = function mergeHighlighting() {
    var i, j;
    // Remove internal highlights
    $('.highlighting', text).filter(function() {
        return this.parentNode.className === 'highlighting';
    }).each(function(index, highlighting) {
        unwrapContents(highlighting);
    });
    text.normalize();
    // Merge adjacent highlights
    first:
    for(i=0; i<text.childNodes.length-1; i++) {
        if(text.childNodes[i].className === 'highlighting') {
            for(j=i+1; j<text.childNodes.length; j++) {
                if(text.childNodes[j].className === 'highlighting') {
                    mergeElements(text.childNodes[i], text.childNodes[j--]);
                    unwrapContents(text.childNodes[i].lastChild);
                } else {
                    switch(text.childNodes[j].nodeType) {
                        case 1:
                            if(text.childNodes[j].className !== 'space') {
                                continue first;
                            }
                            break;
                        case 3:
                            if(text.childNodes[j].textContent.trim() !== '') {
                                continue first;
                            }
                            break;
                    }
                }
            }
        }
    }
};

handleCopy = function handleCopy() {
    var range,
        highlighting,
        item;

    // Highlighting
    range = window.getSelection().getRangeAt(0);
    highlighting = document.createElement('span');
    highlighting.className = 'highlighting';
    highlighting.appendChild(range.cloneContents());
    range.deleteContents();
    range.insertNode(highlighting);

    // Output
    item = document.createElement('li');
    item.innerHTML = highlighting.innerHTML;
    clearHighlighting(item);
    output.appendChild(item);

    // Cleanup
    mergeHighlighting();
    clearSelection();
};

$(function(){
    text = $('.text')[0];
    output = $('.output')[0];
    $(text).on('copy', handleCopy);
});

这是一个工作示例 http://jsbin.com/efohit/3/edit

关于javascript - 在特定点插入字符但保留标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15733349/