javascript - Find closing tag in HTML string - Stack Overflow

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.

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.

• javascript
• html

Share Improve this question Follow edited Feb 11, 2014 at 6:27 PeterJ 3,7923333 gold badges5353 silver badges7272 bronze badges asked Nov 28, 2011 at 11:13 IshuIshu 12.8k55 gold badges3737 silver badges5151 bronze badges 6

• 5 @robin, can you give the answer for the situation which is stated above not entering in deep. If not then why these kind of ments made. I can understand your time is valuable, so don't waste in such kind of ments. – Ishu Commented Nov 28, 2011 at 12:21
• 7 -1 for requesting code when a fine solution is already present. SO is not a code writing service, bounty or not. How should you respond to "Give me a fish" / RTFM questions? – Pekka Commented Nov 30, 2011 at 12:20
• @pekka, i am not demanding for the code but also not demanding for the some theoretical answers. i know i need to found the closing </p> tag in my html string. then put a span close before it(</p>) and again put a span after new p tag. how to implement both of these works. can you show two separate link for both task or one link which have solution for both problem. If fine solution is there there can you give me the link. – Ishu Commented Nov 30, 2011 at 12:39
• 1 @Ishu - Sure, here's one link with solutions to both problems: stackoverflow./a/8323547. Seriously, Helen spelled it out quite clearly for you, teaching you how to do it - It's just a bit of grunt work from here. – Kevin Vermeer Commented Nov 30, 2011 at 13:55
• @kevin Vermeer, the given answer is not good even from pseudo code. If it is pseudo code then i can implement it. It is abstract knowledge like take left turn then right then again left. i mention that i am not having sufficient knowledge about java script. How can i use regex for checking for my string which i get from this line var selectionContents = range.extractContents();. i am not here for time pass, and also i provide solution to newbie in iPhone for their initial label problems. – Ishu Commented Dec 1, 2011 at 5:07

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 15

You could do something along the lines of:

1. Get highlighted section of text.
2. Insert span tag at the first point.
3. For every tag that you e accross within the highlighted text:
   1. If it's an opening tag, check if it's corresponding closing tag is in the highlighted text.
   2. If both opening and closing tags are within the text ignore them and move to the next point after the corresponding closing tag.
   3. If only the opening tag or only the closing tag is present, then insert before the tag and after the tag.
4. Insert span closing tag at the end of the highlighted text.

Possible problem:

span is intented to group inline elements and not block elements so if your highlighted text includes block elements you could have problems. You could use div instead of span to solve this or you could add some checks to distinguish between inline and block tags.

To look at tag matching:

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

To find if the matching closing tag of an element is in the higlighted text (not tested):

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

This looks like a fairly involved problem though - I don't have time to write the code for you but you should be able to work out a way of doing it from here.

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.

Since your goal (based on what you stated in your question) is to highlight selected text with a different color, here is a solution to that goal.

The HTML5BoilerPlate project includes styles to control the selection color (line 52 in the style.css file)

Here's the CSS for it:

/* Remove text-shadow in selection highlight: h5bp./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; }