在特定点插入字符但保留标签？ [英] Insert character at specific point but preserving tags?

问题描述

好的，随后会有更多测试。当我使用虚假间隔时，看起来代码工作正常，但正则表达式最终失败。具体来说，以下方案有效：

Okay, more testing ensues. It looks like the code works fine when I use a faux spacer, but the regex eventually fails. Specifically, the following scenarios work:

1. 选择 a 标签上方或下方的单词


2. 您只选择 a 标记正上方或下方的一行


3. 您选择 a 标记上/下的多行


4. 您选择多行 a tag

1. Select words above or below the a tag
2. You select only one line either directly above or below the a tag
3. You select more than one line above/below the a tag
4. You select more than one line specifically below any a tag

以下情况不起作用：

1. 您选择 a 标记上方的行/多行，然后选择标记下方的行/多行code> a 标签

1. You select the line/more lines above the a tag, and then the line/more lines below the a tag

当它不起作用时会发生什么？从DOM中删除 a 标记spacer。这可能是正则表达式的一个问题...

What happens when it "doesn't work" is that it removes the a tag spacer from the DOM. This is probably a problem with the regex...

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

Basically, it fails when you select text around the a tag.

我不需要在 p 标记中包装每一行，我可以使用内联元素，例如 a ， span 或 label 标签， display：inline-block 和高度+宽度作为新的线元素（< br /> ）。这应该可以更容易地修改代码，因为唯一需要更改的部分是我在文本之间获取文本。我只需要更改那部分 selectedText.textContent ，以检索也在边界内的HTML而不仅仅是文本。

I don't need to wrap each line in a p tag, I can instead use an inline element, such as an a, span, or label tag, with display:inline-block and a height + width to act as a new line element (<br />). This should make it easier to modify the code, as the only part that should have to change is where I get the text in between the bounds. I should only have to change that part, selectedText.textContent, to retrieve the HTML that is also within the bounds instead of just the text.

我正在创建一个要求用户选择文本的Phonegap。但是，我需要对文本选择进行精确控制，并且不能再将整个文本内容放在 pre 样式 p 标签。相反，我需要使用类似< a class =space>< / a> 的代码表示换行符，以便可以精确突出显示正确的单词。当我的文字看起来像这样：

I am creating a Phonegap that requires the user to select text. I need fine control over the text selection, however, and can no longer plop the entire text content in a pre styled p tag. Instead, I need represent a linebreak with something like <a class="space"></a>, so that the correct words can be highlighted precisely. When my text looks like this:

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

Line two

Line three
</p>

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

And has .text{ white-space:pre-wrap }, the following code allows me to select words, then wrap the text with span elements to show that the text is highlighted:

$("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();
    }
}

此代码运行良好，但不是每行都是由间隔标签隔开。新文字如下所示：

This code works beautifully, but not when each line is separated by a spacer tag. The new text looks like this:

<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 或标签，或者任何正常的内联定位元素，诱骗iOS允许我选择字母而不是块元素。

When I modify the above code to work with have new lines represented by <a class="space"></a>, the code fails. It only retrieves the text of the selection, and not the HTML (selectedText.textContent). I'm not sure if the regex will also fail with an a element acting as a new line either. The a element could be a span or label, or any normally inline positioned element, to trick iOS into allowing me to select letters instead of block elements.

是否有更改代码以保留新的线元素？

Is there anyway to change the code to preserve the new line elements?

如果文本第一行突出显示：

If the text "Line one" was highlighted:

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

如果突出显示第一行第二行文本：

If the text "Line one Line two" was highlighted:

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

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

Of course different parts and individual letters can and will be highlighted as well instead of full lines.

推荐答案

好吧，我想出了一个解决方案，也很简单。

Well, I came up with a solution, rather straightforward as well.

如果 .text 看起来像这样：

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

如上所示的确切标记和换行符，我可以找到每个 \ n 并将其替换为spacer元素。

With the exact markup and line breaks as above, then I can find each \n and replace it with a spacer element.

if (textStr.indexOf("\n") >= 0) {
    textStr = textStr.replace(/\n/g, "\n<a class='space'></a>");
}

这根本不是多功能的，如果超过一行换行，如果标签不同等等，那么，我鼓励任何有更好方法的人回答这个问题！它不会那么难，我想通了。

This isn't versatile at all, and will fail if there are more than one line breaks, if the tags are different, etc. So, I encourage anyone who has a better method to answer the question! It can't be that hard, I figured it out.

这篇关于在特定点插入字符但保留标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！