Подсветка текста между пользовательскими тегами - PullRequest
Новая
       8

Подсветка текста между пользовательскими тегами

1 голос
/ 20 апреля 2010

В xhtml я хочу выделить текст между двумя самозакрывающимися тегами s1 и s2, у которых атрибут "ind" имеет одинаковое значение. Например. <s1 ind="1"/> и <s2 ind="1" /> Например. <html> <body> <a> <b> Некоторые <s1 ind="1"/> text> </b> <c> данные <s2 ind="1"/> здесь </c> </a> </body> </html> Я хочу, чтобы "текстовые данные" были выделены. Можно ли добиться с помощью javascript / jquery? У меня может быть много таких самозакрывающихся пар тегов s1 и s2 с уникальным значением «ind» для пары, указывающим, что текст внутри них должен быть выделен.

Ответы [ 2 ]

2 голосов
/ 20 апреля 2010

В HTML нет такой вещи, как «пользовательские теги». Вы не можете просто сделать теги. Они могут работать в некоторых браузерах, но на это не стоит полагаться. Используйте «нормальные» теги, такие как div и span с классом.

РЕДАКТИРОВАТЬ: Хорошо, я думаю, что я получил то, что вы хотите сейчас. Однако вы по-прежнему не можете использовать ни пользовательские элементы, ни самозакрывающиеся - особенно если вам нужно поддерживать IE, поскольку он также не поддерживает. Вместо этого вам нужно будет использовать пустые элементы, такие как: 

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

Затем вам нужно пройти по дереву документа, начиная с <span id="s1-1"></span> и заканчивая <span id="s2-1"></span>, и "обернуть" все текстовые узлы, найденные на пути, с помощью span s и класса, который вы можете использовать для выделения.

Примерно так (непроверенный, с макушки головы и, скорее всего, неправильно, потому что я устал): 

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

Кстати, в зависимости от того, где и как вы получаете ваши данные, это может быть то, что вы должны делать на стороне сервера, а не с помощью JavaScript.

0 голосов
/ 20 апреля 2010

вместо использования ваших "пользовательских тегов" вы должны использовать span или div с классом с именем highlight: 

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

с помощью CSS вы можете отформатировать выделенный текст так, как вы хотите: 

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

с помощью jQuery вы можете добавить или удалить класс highlight: 

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

РЕДАКТИРОВАТЬ: теперь у меня есть ваша проблема.

Ответ: Нет, вы не можете выделить текст, охватывающий другие HTML-теги, например: 

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

Вы должны закрыть тег span перед </b> и снова открыть его после него: 

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