如何跳过匹配html属性中的文本？

如何解决如何跳过匹配html属性中的文本？

我想从 html 中获取匹配字符串的索引以突出显示 html 中的特定匹配项。 问题是我在脚注链接（有脚注文本）中使用带有标题的工具提示。所以..当我试图在脚注中突出显示某些内容时，它会在脚注引用的工具提示中突出显示。

有没有办法跳过html属性的匹配并跳转到下一个匹配？ （因为我需要特定匹配的索引，所以我不能使用 `$(selector).text();

请帮助我 - 以下是我的代码示例：

var selectedContent = $(selector).html();

var regex = new RegExp('/The text from footnote/','gi');

var indices = [];

while(result = regex.exec(selectedContent))
{
    indices .push(result.index);
}

正则表达式匹配脚注工具提示中的文本，用作脚注参考。

我的代码示例是 here。请检查一下。

解决方法

试试这个：

var regex = new RegExp("(?!<[^>]+)" + textToHighlight + "(?![^<]+>)",'gi');

var finalHtml = selectedContent.replace(regex,'<highlight class="highlight">'+textToHighlight+'</highlight>');

if(finalHtml)
    $('#lipsumContainer').html(finalHtml);

[编辑]

这是一个 highlightText() 函数，它直接在 textnodes 中搜索字符串，这意味着它不会影响属性，但是如果它在不同元素之间拆分，它将找不到文本。

在本例中，它将突出显示选定的文本：

function highlightText(node,text) {
  if (!node)
    return;

  if (node.nodeType == 3) { //process textnode
    const index = node.data.indexOf(text);

    if (index == -1)
      return;

    const textNodeMark = node.splitText(index),textNodeAfter = textNodeMark.splitText(text.length),mark = document.createElement("mark");

    mark.appendChild(textNodeMark);
    node.parentNode.insertBefore(mark,textNodeAfter);

  } else {
    for (let n of node.childNodes) {
      if (n.tagName !== "MARK")
        highlightText(n,text);
    }
  }
}

/* demo highlight selected text */

const container = document.getElementById("lipsumContainer");

container.addEventListener("click",e => {
  const text = document.getSelection().toString().trim();

  if (text === "")
    return;


  for(let m of container.querySelectorAll("mark"))
    m.parentNode.replaceChild(m.firstChild,m); // remove previous marks;

  container.normalize(); // join any split textnodes 
  highlightText(container,text); // add new highlighting
},true);

$('#lipsum').on('mouseenter','#_contentFoot1',function(){
    var tooltipPosition = $(this).position(); 
  var title = $(this).data('title');
    var tooltipHtml = '<div class="tooltip">'+
  '<span class="tooltiptext">'+title+'</span>'+'</div>'; 
    $('body').append(tooltipHtml);
    $('.tooltip').attr("style","top: "+tooltipPosition.top+"px;left: "+tooltipPosition.left+"px;");  
})

$('#lipsum').on('mouseleave',function(){
    $('.tooltip').remove();
})

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%;
  /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip {
  position: absolute;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: visible;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

mark {
  background-color: lightgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lipsumContainer">
  <div id="lipsum">
<p><b>bold</b> <i>italic</i></p>
<p><b>bold</b> <i>italic</i></p>
    <p>
      Vivamus vel commodo nisl,sed maximus lectus. Donec semper suscipit porta. Ut facilisis turpis pellentesque purus laoreet sagittis. Donec at scelerisque dui. Nullam hendrerit eros et lacinia venenatis. Nullam sodales nulla sit amet est ultrices,sit amet tempus risus consequat.<a id="_contentFoot1" href="#_foot1" data-toglggle="tooltip" data-title="The 1st footnote text"><sup>[1]</sup></a> Fusce suscipit ipsum vel dapibus sagittis. Nullam tellus nisl,egestas ut feugiat non,porttitor
      eget erat. Suspendisse placerat dictum nulla non sollicitudin. Maecenas nec tortor felis. Donec id cursus ligula,a volutpat sapien.
    </p>
  </div>

  <div class="footnotes">
    <p id="_foot1">
      <a href="#_contentFoot1">[1]</a> <span>The 1st footnote text</span>
    </p>
  </div>

</div>

,

在示例中，我创建了一个变量 countMatch 来跳过第一场比赛。

 

https://jsfiddle.net/f1sbh7x6/