Insert span in a dom element without overwrite child nodes?

Question

I have an HTML article with some annotations that I retrieve with SPARQL queries. These annotations refer to some text in the document, and I have to highlight this text (wrapping it in a span).

I had already asked how to wrap text in a span, but now I have a more specific problem that I do not know how to solve. The code I wrote was:

var currentText = $("#"+v[4]["element"]+"").text();
var newText = currentText.substring(0, v[5]["start"]) + "<span class=' annotation' >" + currentText.substring(v[5]["start"], v[6]["end"]) + "</span>" + currentText.substring(v[6]["end"], currentText.length);
$("#"+v[4]["element"]+"").html(newText);

Where:

v[4]["element"] is the id of the parent element of the annotation

v[5]["start"] is the position of the first character of the annotation

v[6]["end"] is the position of the last character of the annoation

Note that start and end don't consider html tags.

In fact my mistake consists in extracting data from the node with the text() method (to be able to go back to the correct position of the annotation) and put back with the html() method; but in this manner if parent node has children nodes, they will be lost and overwritten by simple text.

Example: having an annotation on '2003'

<p class="metadata-entry" id="k673f4141ea127b">
    <span class="generated" id="bcf5791f3bcca26">Publication date (<span class="data" id="caa7b9266191929">collection</span>): </span>
    2003
</p>

It becomes:

<p class="metadata-entry" id="k673f4141ea127b">
    Publication date (collection): 
    <span class="annotation">2003</span>
</p>

I think I should work with nodes instead of simply extract and rewrite the content, but I don't know how to identify the exact point where to insert the annotation without considering html tags and without eliminating child elements.

I read something about the jQuery .contents() method, but I didn't figure out how to use it in my code.

Can anyone help me with this issue? Thank you

EDIT: Added php code to extract body of the page.

function get_doc_body(){
    if (isset ($_GET ["doc_url"])) {

        $doc_url = $_GET ["doc_url"];
        $doc_name = $_GET ["doc_name"];

        $doc = new DOMDocument;
        $mock_doc = new DOMDocument;

        $doc->loadHTML(file_get_contents($doc_url.'/'.$doc_name));
        $doc_body = $doc->getElementsByTagName('body')->item(0);
        foreach ($doc_body->childNodes as $child){
            $mock_doc->appendChild($mock_doc->importNode($child, true));
        }
        $doc_html = $mock_doc->saveHTML();
        $doc_html = str_replace ('src="images','src="'.$doc_url.'/images',$doc_html);

        echo($doc_html);
    }

}

You will have to iterate over all text nodes. For each text node, split it using the words as separators. Iterate the result and generate a text node is the string is not a word and span element if it is one. Insert the news nodes before the original text node. Last remove the original text node. — ThW, Jan 26 '15 at 14:18
Sorry I didn't understand your answer very well, can you please give me a short snippet applied to the `
` element in my example? — Gio Bact, Jan 26 '15 at 14:30
Not really, that's why this is an comment, not an answer. You need to start differently. Do not match the element nodes and fetch their 'text' but fetch the text nodes directly. The text nodes contain the words you want to highlight and need to be replaced with new nodes. I implemented this in PHP some years ago... — ThW, Jan 26 '15 at 14:59
Ok, I found a function in [this](http://stackoverflow.com/questions/2525368/loop-through-text-nodes-inside-a-div) question and I tried using it in [Fiddle](http://jsfiddle.net/5k0ge28c/9/). Variables are correct, but it seems never find a textnode, so it never changes the content. Can you help me? — Gio Bact, Jan 26 '15 at 15:26

score 4 · Answer 1 · answered Jan 26 '15 at 10:34

4

Instead of doing all these, you can either use $(el).append() or $(el).prepend() for inserting the <span> tag!

$("#k673f4141ea127b").append('<span class="annotation">2003</span>');

Or, If I understand correctly, you wanna wrap the final 2003 with a span.annotation right? If that's the case, you can do:

$("#k673f4141ea127b").contents().eq(1).wrap('<span class="annotation" />');

Fiddle:

$(document).ready(function() {
  $("#k673f4141ea127b").contents().eq(1).wrap('<span class="annotation" />');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="metadata-entry" id="k673f4141ea127b">
    <span class="generated" id="bcf5791f3bcca26">Publication date (<span class="data" id="caa7b9266191929">collection</span>): </span>
    2003
</p>

answered Jan 26 '15 at 10:34

Praveen Kumar Purushothaman

164,888
24
203
252

With `append()` I add `2003` at the end of my element, and it's not what I want. I have to highlight text that is already in the document. Moreover I could have annotation in the middle of the text so I can't use append(). – Gio Bact Jan 26 '15 at 10:38
@GioBact Check out the updated answer. The second one. The one with the fiddle. – Praveen Kumar Purushothaman Jan 26 '15 at 10:39
Ok I think this is the good way, but with your code the result is: `
Publication date (collection): 2003
` I tried also `eq(0)` but insert an empty span at the beginning of the element – Gio Bact Jan 26 '15 at 10:44
Lemme get it clear. You want the empty 2003 to be wrapped with the `.annotation` span right? Say yes or no. – Praveen Kumar Purushothaman Jan 26 '15 at 10:46
Yes. I want '2003' wrapped with span. Now `.annotation` wrap everything but '2003'. Thank you for your patience – Gio Bact Jan 26 '15 at 10:49
1

You could probably use JavaScript's `.replace()` function: `yourText.replace('2003', '2003');` – Agi Hammerthief Jan 26 '15 at 10:51
But the `replace()` method only applies to strings, right? So it always comes back to the same problem of extracting a string from the node with the `text ()` method or the `html()` method, and how to find the start point of the span? – Gio Bact Jan 26 '15 at 11:17
@GioBact How do you generate it? – Praveen Kumar Purushothaman Jan 26 '15 at 12:28
@GioBact Bro, I understand that. How do you generate that HTML? – Praveen Kumar Purushothaman Jan 26 '15 at 13:05
I have a php file with a `file_get_contents` method from which I retrieve the body of the HTML page. – Gio Bact Jan 26 '15 at 13:17
Great... Post that source. If possible I will try to modify from there. – Praveen Kumar Purushothaman Jan 26 '15 at 13:20
@GioBact Can the Doc URL be the same as the one you gave me? – Praveen Kumar Purushothaman Jan 26 '15 at 14:14
Yes doc_url is the same, all the documents are located at this url (I stored it in a constant). – Gio Bact Jan 26 '15 at 14:19
It displays a bunch of HTML String. Is that the way? – Praveen Kumar Purushothaman Jan 26 '15 at 14:19
Yes it is a directory with many files, and in doc_url you can see all the links to these html. In fact to retrieve the body I use `doc_url."/".doc_name` – Gio Bact Jan 26 '15 at 14:26

score 0 · Answer 2 · answered Jan 26 '15 at 16:44

At the end my solution is in this Fiddle.

Generalizing:

        var element = document.getElementById(id);
        var totalText = element.textContent;
        var toFindText = totalText.substring(start,end);
        var toReplaceText = "<span class='annotation'>"+toFindText+"</span>";
        element.innerHTML = element.innerHTML.replace(toFindText, toReplaceText);

Hope it could help someone else.

Note: This don't check if two or more annotations refers to the same node, I'm working on it right now.

In this case, you know the start and end. :( – Praveen Kumar Purushothaman Jan 28 '15 at 13:19 — Praveen Kumar Purushothaman, Jan 28 '15 at 13:19

Insert span in a dom element without overwrite child nodes?

2 Answers2

Fiddle: