在HTML字符串中查找结束标记

Question

我需要从不同的段落中选择文本并制作用于显示此文本的范围.看这个例子:

<p> this is a text </p>
<p>hello ever one </p>

现在我想要的是,如果我在我的iPhone应用程序中从Web视图中选择文本,它会以不同的颜色突出显示它.为此,我正在制作一个跨度并设定其风格.它适用于同一段但不适用于不同的段落.看到这个:

<p> this <span class="blue">is a </span> text </p>

蓝色类声明它的样式,它工作正常,但以下不起作用:

<span class="blue">
<p> this is a text </p>
<p>hello ever </span> one </p>

为了解决这个问题,我需要两个段落的两个跨度.那么如何查看新段落的开始位置？正确的HTML代码是:

<span class="blue">
<p> this is a text </p></span> 
<p>   <span class="blue"> hello ever </span> one </p>

我需要获取此HTML字符串,但我得到了错误的字符串.我编写了一个JavaScript函数来获取选择并根据选择产生跨度.但是从两个段落中选择文本时它不起作用,因为它给出了错误的HTML代码部分.查看我的JavaScript代码:

function highlightsText()
{
    var range = window.getSelection().getRangeAt(0);
    var selectionContents = range.extractContents();   
    var div; 
    var newDate = new Date;
    var randomnumber= newDate.getTime();
        var imageTag = document.createElement("img");
    imageTag.id=randomnumber;
    imageTag.setAttribute("src","notes.png");   
    var linkTxt = document.createElement("a");
    linkTxt.id=randomnumber;
    linkTxt.setAttribute("href","highlight:"+randomnumber);
    div = document.createElement("span");
div.style.backgroundColor = "yellow";
div.id=randomnumber;
linkTxt.appendChild(imageTag);
div.appendChild(selectionContents);
div.appendChild(linkTxt);
range.insertNode(div);
return document.body.innerHTML+"<noteseparator>"+randomnumber+"<noteseparator>"+range.toString();
}

请提供可以解决此问题的解决方案.

Answer 1

你可以做一些事情:

1. 获取突出显示的文本部分.
2. 在第一个点插入span标记.
3. 对于您在突出显示的文本中遇到的每个标记:
   1. 如果它是一个开始标记,请检查相应的结束标记是否在突出显示的文本中.
   2. 如果开始和结束标记都在文本中,则忽略它们并移动到相应结束标记之后的下一个点.
   3. 如果仅存在开始标记或仅存在结束标记,则在标记之前和标记之后插入.
4. 在突出显示的文本末尾插入范围结束标记.

可能的问题:

span旨在对内联元素进行分组而不是块元素,因此如果突出显示的文本包含块元素,则可能会出现问题.您可以使用div而不是span来解决此问题,或者您可以添加一些检查来区分内联和块标记.

要查看标记匹配:

http://haacked.com/archive/2004/10/25/usingregularexpressionstomatchhtml.aspx

要查找元素的匹配结束标记是否在高亮显示的文本中(未测试):

function checkClosingTag(position)
{
    //Find position of next opening or closing tag along the 
    //string of highlighted text.
    //Return 0 if no more tags.
    var nextTag = findNextTag(position);

    if(nextTag == 0)
    {
        return 0;
    }

    if(!isOpeningTag(nextTag))
    {
        return nextTag;
    }

    var nextTagClose = checkClosingTag(nextTag);

    if(nextTagClose == 0)
    {
        return 0;
    }

    return checkClosingTag(nextTagClose);
}

这看起来像是一个相当复杂的问题 - 我没有时间为你编写代码,但是你应该能够从这里找到一种方法.