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

我需要从不同的段落中选择文本，并为显示此文本留出一个跨度。请参见此示例：

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

这是一个文本

你好，有人吗

现在我想要的是，如果我在iPhone应用程序中从web视图中选择文本，它会以不同的颜色高亮显示。为此，我正在创建一个跨度并设置其样式。它适用于同一段落，但不适用于不同段落。见此：

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

这是一个文本

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

函数highlightsText（）
{
var range=window.getSelection（）.getRangeAt（0）；
var selectionContents=range.extractContents（）；
var-div；
var newDate=新日期；
var randomnumber=newDate.getTime（）；
var imageTag=document.createElement（“img”）；
imageTag.id=随机数；
setAttribute（“src”、“notes.png”）；
var linkTxt=document.createElement（“a”）；
linkTxt.id=随机数；
setAttribute（“href”，“highlight:”+randomnumber）；
div=document.createElement（“span”）；
div.style.backgroundColor=“黄色”；
div.id=随机数；
linkTxt.appendChild（imageTag）；
div.appendChild（selectionContents）；
div.appendChild（linkTxt）；
range.insertNode（div）；
return document.body.innerHTML+“”+randomnumber+“”+range.toString（）；
}

---

请提供解决此问题的解决方案。

您可以采取以下措施：

获取文本的突出显示部分

在第一个点插入跨度标记

对于高亮显示文本中出现的每个标记：

如果是开始标记，请检查高亮显示的文本中是否有相应的结束标记

如果开始和结束标记都在文本中，则忽略它们并移动到相应结束标记后的下一点

如果只有开始标记或结束标记，则在标记前和标记后插入

在突出显示的文本末尾插入范围结束标记

可能的问题：

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

要查看标记匹配，请执行以下操作：

要查找元素的匹配结束标记是否在高亮显示的文本中（未测试），请执行以下操作：

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

由于您的目标（基于您在问题中所述）是用不同的颜色突出显示选定的文本，因此这里有一个解决方案

项目包括用于控制选择颜色的样式（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; }

---

代码中的一些更改可以工作

看到这行代码了吗

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

}   

函数highlightsText（）
{
var范围，sel；
if（window.getSelection）
{
sel=window.getSelection（）；
如果（选择getRangeAt）{
范围=选择范围（0）；
}
document.designMode=“on”；
如果（范围）{
选择removeAllRanges（）；
选择添加范围（范围）；
}
if（！document.execCommand（“HiliteColor”，false，“yellow”））{
document.execCommand（“背景色”，假，“黄色”）；
}
document.designMode=“关闭”；
} 
else if（document.selection&&document.selection.createRange）{
range=document.selection.createRange（）；
range.execCommand（“背景色”，假，“黄色”）；
}
var newDate=新日期；
var randomnumber=newDate.getTime（）；
var nodeList=document.queryselectoral（“.Apple-style-span”）；
for（var i=0，length=nodeList.length；i

---

您需要对这段代码进行一些调整。

@robin，您能回答上面提到的情况吗。如果没有，那么为什么会有这样的评论。我能理解你的时间是宝贵的，所以不要浪费在这样的评论上。-1用于在已经有好的解决方案时请求代码。所以这不是一个代码编写服务，不管是不是赏金@佩卡，我不是在要求代码，也不是在要求一些理论上的答案。我知道我需要在html字符串中找到结束标记。然后在其前面加上一个span（

），再在新的p标签后面加上一个span。如何实现这两项工作。您可以为两个任务显示两个单独的链接，还是为两个问题都提供解决方案的一个链接。如果有很好的解决方案，你能给我一个链接吗。@Ishu-当然，这里有一个链接可以解决这两个问题：。说真的，海伦给你讲得很清楚，教你怎么做——这只是一点繁重的工作。@kevin Vermeer，给出的答案即使是伪代码也不好。如果它是伪代码，那么我可以实现它。它是抽象的知识

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

}