Find items that include text, then highlight them?
<p>I am working on a project in Javascript/jQuery that will allow me to highlight text in a document. When the user then clicks on a button, it removes the highlight.</p>

<p>I am using the <a href="http://rangy.googlecode.com/svn-history/r511/trunk/demos/highlighter.html" rel="nofollow">Rangy highlighter module</a> to handle the highlighting.</p>

<p>If I have an element like so:</p>

<pre><code>&lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
</code></pre>

<p>And I highlight <code>Lorem ipsum</code> by calling <code>var newHighlights = highlighter.highlightSelection("highlight");</code>, it will change the code to:</p>

<pre><code>&lt;p&gt;&lt;span class="highlight"&gt;Lorem ipsum&lt;/span&gt; dolor sit amet&lt;/p&gt;
</code></pre>

<p>My script then takes the text from the highlight, and adds it below the page. If you click on one of these text snippets, it goes through the document, finding all <code>.highlight</code> span elements, and sees if they include the text that is in the text snippet.</p>

<p>Because I am using Rangy, in order for me to unhighlight text, the text needs to be highlighted by the browser's cursor. This would be a problem, but I only need to worry about Safari, so it's not.</p>

<p>My code for unhighlighting is as follows:</p>

<pre><code>$(".output ul").on("click", "li", function () {
    var text = $(this).text();
    var element = $.find(".highlight:contains('" + text + "')");
    if (element.length &gt; 0) {
        var sel = window.getSelection();
        sel.removeAllRanges();
        var range = document.createRange();
        range.setStart(element[0], 0);
        range.setEnd(element[0], 1);
        sel.addRange(range);
        removeHighlightFromSelectedText();
    }
    $(this).remove();
    saveIt();
});
</code></pre>

<p>That would then go through the document, and unhighlight any elements that match the text in the text snippet, making the output return to normal.</p>

<h2>The problem</h2>

<p>The element that allows highlighting has multiple lines. The content for the element is retrieved via PHP, and since I didn't want to convert newlines to <code>&lt;br&gt;</code> tags, I used a <code>&lt;pre&gt;</code> element to put the content in:</p>

<pre><code>&lt;pre&gt;
Lorem ipsum

Dolor sit

Amit
&lt;/pre&gt;
</code></pre>

<p>Since this preserves the line spaces, I am able to use the highlight and unhighlight code above flawlessly. This project is also for iOS, however, and iOS does not like <code>&lt;pre&gt;</code> elements when it comes to selecting text. So, in my PHP, I used <code>nl2br()</code> to convert all the new lines to <code>&lt;br&gt;</code> tags, like so:</p>

<pre><code>&lt;p&gt;
Lorem ipsum
&lt;br /&gt;
Dolor sit
&lt;br /&gt;
Amit
&lt;/p&gt;
</code></pre>

<p>iOS is much happier, but my unhighlight script is not. <strong>If I highlighted</strong> the text "Lorem ipsum Dolor sit" in the first example, the output would look like this:</p>

<pre><code>&lt;pre&gt;
&lt;span class="highlight"&gt;Lorem ipsum

Dolor sit&lt;/span&gt;

Amit
&lt;/pre&gt;
</code></pre>

<p>Unhighlighting that is easy, and my unhighlight script works fine with that scenario. If, however, I use <code>nl2br()</code>, and I select the same text, the output would look like this:</p>

<pre><code>&lt;p&gt;
&lt;span class="highlight"&gt;Lorem ipsum&lt;/span&gt;
&lt;br /&gt;
&lt;span class="highlight"&gt;Dolor sit&lt;/span&gt;
&lt;br /&gt;
Amit
&lt;/p&gt;
</code></pre>

<p><strong>That's when my unhighlight code stops working.</strong> Since it looks for <code>.highlight</code> elements that include the text, it looks over elements that include the text, but are separated by a few <code>&lt;br&gt;</code> tags.</p>

<p>So, is there anyway I can modify my unhighlight code to work when there are <code>&lt;span&gt;</code> elements separated by <code>&lt;br&gt;</code> tags?</p>
