Question

I need to select text from different paragraphs and make a span for showing this text. See this example:

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

Now what I want is that if I select text from the web view in my iPhone app it highlights it in a different color. For this I am making a span and setting its style. It works fine for the same paragraph but not for different paragraphs. See this:

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

Class blue declares its style and it works fine, but the following does not work:

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

For solving this problem I need two spans for both paragraphs. So how can I check where the new paragraph starts? The correct HTML code is:

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

I need to get this HTML string but I get the wrong one. I have written a JavaScript function that gets the selection and makes a span according to selection. But on selecting text from two paragraphs it does not work because it gives the wrong section of HTML code. See my JavaScript code:

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

Please provide a solution that can resolve this problem.

Answer 1

some change in your code can work

see this line of codes

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

You need make some adjustments in this code.