ansaurus

Question

Answer 1

+2 A:

There is no such thing as "custom tags" in (X)HTML. You can't just make up tags. They may work in some browsers, but its not something you should rely on. Use "normal" tags such as divand span with a class.

EDIT: Ok, I think I get what you want now. However you still can't use custom elements nor self-closing ones - especially if you need to support IE, since it doesn't support either. You'll need to use empty elements instead, such as:

<html><body><a><b>Some <span id="s1-1"></span> text></b> <c>data <span id="s2-1"></span>here</c> </a></body></html>

What you need to do then is traverse the document tree starting with  and ending with  and "wrap" all textnodes found on the way with spans and a class you can use to highlight.

Something like this (untested, from the top of my head and most likely wrong because I'm tired):

function wrapUntil(element, nr) {
  if (element.id === "s2-" + nr) 
    return;
  if (element.nodeType === 3) {
    var span = document.createElement("span");
    span.className = "highlight-" + nr;
    element.parentNode.replaceChild(span, element);
    span.appendChild(element);
    element = span;
  } else {
     var child = element.firstChild;
     if (child) {
       wrapUntil(child, nr);
     }
  }
  var sibling = element.nextSibling();
  if (sibling)
    wrapUntil(sibling, nr);
  else
    wrapUntil(element.parentNode(), nr);
}
wrapUntil(document.getElementById("s1-1"), "1");

BTW, depending on where and how you get your data, this may be something you should be doing server-side instead of with JavaScript.

RoToRa 2010-04-20 15:38:27

The self closing custom tags are just an indicator for the text to be highlighted which can span across other html tags. If i have a self closing span tag pair with the same id/other possible attribute. Is there a way to highlight the text beween the span tags having the same id value(though id should be unique). I am more specific in using the self closing tags as there could be other tags inbetween the text to be highlighted.

Rachel 2010-04-20 15:54:53

Thanks. I will try this.

Rachel 2010-04-20 22:21:17

For the xhtml with span tags "s1-1" and "s2-1" that you have shown, can you show a sample output format with span tags for highlighting. It will help me understand what exatly you are trying to you.

Rachel 2010-04-21 16:24:20

Answer 2

A:

instead of using your "custom tags" you should use a span or div with a class named highlight:

<span class="highlight">This text is highlighted</span>

with CSS you can format your highlighted text however you want:

.highlight { background-color:yellow; font-weight:bold }

with jQuery you can add or remove the highlight class:

$('span').addClass('highlight')
$('span').removeClass('highlight')

EDIT: now I got your problem.

The answer is No, you can't hightlight a text spanning accross other html tags, like this:

This <b>code <span class="highlight">will</b> not</span> work

You have to close the span tag before  and open it up again after it:

This <b>code <span class="highlight">will</span></b>
<span class="hightlight"> work</span> very well.

buggy1985 2010-04-20 15:59:53

With span tag i must ensure that the text to be highlighted should be within the span start and end tag. In my case the text to be highlighted can have other tags inbetween which may not be closed within the span. I want to have self closing tags to indicate my text to highlight. Is there a way to highlight the text between two self closing span tags having same value for some attibute say id(though id should be unique)/custom attibute?

Rachel 2010-04-20 16:08:09

Is there a way populate the span tags for all the text nodes between all s1, s2 pairs with the same "ind". i.e. <s1 ind="1"/> and <s2 ind="1" /> using javascript/jquery?

Rachel 2010-04-21 18:26:09

ansaurus

tags:

views:

answers:

Highlighting text beween custom tags

related questions