0

I have an HTML article with some annotations on it, this annotation refers to some text inside the body. I want to wrap this text in a <span> tag so that I can modify it as I want.

I have a SPARQL Query that returns me some info and three important variables:

element --> the id of the container element of the text

start --> position of the first character of the annotation inside the element

end --> position of the last character of the annotation inside the element

Below there is an example that maybe will clarify.

With this element:

    <p class="metadata-entry" id="element_id">
    <span class="generated" id="span1">Publisher: </span>
    BioMed Central
    <span class="generated" id="span2"> (</span>
    London
    <span class="generated" id="span3">)</span>
    </p>

Since I have an annotation on the word "London" when I run my query I obtain:

element = "element_id"
start = 27
end = 33

Now, after my ajax call that returns these 3 values, how can I wrap the word "London" in a span so I can set its background to a specific color?

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Gio Bact
  • 541
  • 1
  • 7
  • 23

1 Answers1

0

This may be a bit dirty, but I think it should work. Since you have the element that contains "London", you can replace the HTML of that element with a modified version of what's currently in there.

You can see how to use the jquery html function here:

How to replace innerHTML of a div using jQuery?

Basically, what you'd do is use it as a getter to get the HTML out of the "element_id" element, modify it using Javascript string functions by adding span tags at the start and end indexes you have, and then using the html function to replace "element_id"'s HTML with the modified string.

I hope this works for you!

EDIT: To illustrate this better, here's essentially what you'd be doing:

var currentHTML = $(element).html();
var newHTML = currentHTML.substring(0, start) + "<span style='background-color: green;'>" + currentHTML.substring(start, end) + "</span>" + currentHTML.substring(end, currentHTML.length);
$("element_id").html(newHTML);
Community
  • 1
  • 1
Sean Cogan
  • 2,516
  • 2
  • 27
  • 42
  • Ok, after a lot of trouble with a Json parser error I figure out how to add span to the element. The only problem is that my **start** and **end** value don't count the tag characters, so if I pass 27 it means the 27th character showed in the page. Instead `substring` method add my html in the middle of another tag. Is there a way to avoid tags characters? – Gio Bact Jan 19 '15 at 17:56
  • There's a text method for JQuery that only returns the text in an element: api.jquery.com/text/ I'm thinking you could do something fancy to combine the HTML with the modified text. – Sean Cogan Jan 19 '15 at 18:24
  • Basically, you could use the $(element).text to figure out the string that corresponds to the start and end indices. You can then use the Javascript indexOf method to find out where that word ("London") is in the HTML string. Then, you would use that as the new start and end indices and use the method in my answer. Make sense? – Sean Cogan Jan 19 '15 at 18:30
  • 1
    Yes! `text()` instead of `html()` creating `currentHTML` and everything works fine. Thank you very much for your answer! It helped me a lot! – Gio Bact Jan 19 '15 at 18:32
  • Glad to be of help! I know this isn't the cleanest solution, but I'm glad it works for you. – Sean Cogan Jan 19 '15 at 18:34