Question

我需要从不同段落中选择文字并制作用于显示此文字的范围。见这个例子：

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

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

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

Class blue声明它的样式并且它工作正常，但以下不起作用：

<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

您可以采取以下措施：

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

可能的问题：

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);
}

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

Answer 2

您的代码中的某些更改可以正常工作

看到这行代码

function highlightsText()
{

var range, sel;
if (window.getSelection) 
{
sel = window.getSelection();
if (sel.getRangeAt) {
range = sel.getRangeAt(0);
}
document.designMode = "on";
if (range) {
sel.removeAllRanges();
sel.addRange(range);
}
if ( !document.execCommand("HiliteColor", false, "yellow") ) {

document.execCommand("BackColor", false, "yellow");
}
document.designMode = "off";
} 
else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
range.execCommand("BackColor", false, "yellow");
}


    var newDate = new Date;
    var randomnumber= newDate.getTime();
   var nodeList = document.querySelectorAll(".Apple-style-span");
    for (var i = 0, length = nodeList.length; i < length; i++) {
         nodeList[i].id = randomnumber;  
        }


         var div = document.getElementById(randomnumber);

    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.appendChild(linkTxt);

range.insertNode(div);


    return document.body.innerHTML+"<noteseparator>"+randomnumber+"<noteseparator>"+range.toString();

}

您需要在此代码中进行一些调整。

Answer 3

由于您的目标（根据您在问题中所述的内容）是使用不同颜色突出显示所选文字，因此以下是此目标的解决方案。

HTML5BoilerPlate项目包含控制选择颜色的样式（style.css文件中的第52行）

这是它的CSS：

/* Remove text-shadow in selection highlight: h5bp.com/i
 *
 * These selection declarations have to be separate
 *
 * Also: hot pink! (or customize the background color to match your design)
 */
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

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

3 个答案: