Question

在xhtml中，我想突出显示两个自闭标签s1和s2之间的文本，其属性“ind”具有相同的值。例如。 <s1 ind="1"/>和<s2 ind="1" /> 例如。 <html> <body> <a> 部分<s1 ind="1"/> text＆gt;  此处<c>数据<s2 ind="1"/> </c> </a> </body> </html> 我希望“文本数据”能够突出显示。有可能实现使用javascript / jquery？我可以有许多这样的自闭标签对s1和s2，对于该对的“ind”具有唯一值，表示其中的文本需要突出显示。

Answer 1

（X）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的路上找到的所有文本节点以及类可以用来突出显示。

像这样的东西（未经测试，从我的头顶，很可能是错的，因为我累了）：

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。

Answer 2

而不是使用“自定义标记”，您应该使用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

您必须在之前关闭范围标记，然后再将其打开：

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

突出显示自定义标记之间的文本

2 个答案: