如何从正则表达式替换中排除 jpeg-names？

Question

我正在为一个文档站点使用 search-function，该站点在选择搜索命中后会显示突出显示文本的页面（就像 pdf-reader 或 netbeans 所做的那样）。

为了突出显示，我使用 javascript 和：

function searchHighlight(searchTxt) {
  var target = $('#page').html();
  var re = new RegExp(searchTxt, 'gi');
  target = target.replace(
    re,
    '<span class="high">' + searchTxt + '</span>'
  );
  $('#page').html(target);
}

问题/疑问：

由于页面包含文件名基于 md5 的图像，因此某些搜索会弄乱图像 src。

搜索“1000”会扭曲

<img src="53451000abababababa---.jpg"

到

<img src="5334<span class="hl">1000</span>abababab--.jpg">

是否可以使用正则表达式解决此问题，以某种方式排除与“.jpg”相关的任何内容？

或者是否可以在突出显示之前用占位符替换图像，并在替换之后还原为 src？

示例：

将所有替换为 {{I-01}}、{{I-02}} 等，并将真实的 src 保存在变量中。
进行上面的替换。
从 {{I-01}} 恢复到

DOM-manipulation 当然是一个选项，但我认为这可以通过某种方式使用正则表达式来完成，但是，我的正则表达式技能严重缺乏。

更新此代码现在对我有用：

function searchHighlight(searchTxt) {    
var stack = new Array();
var stackPtr = 0;
var target = $('#page').html();
//pre
target = target.replace(/<img.+?>/gi,function(match) {
  stack[stackPtr] = match;
  return '{{im' + (stackPtr++) + '}}';
});
//replace
var re = new RegExp(searchTxt, 'gi');
target = target.replace(re,'<span class="high">' + searchTxt + '</span>');
//post
stackPtr = 0;
target = target.replace(/{{im.+?}}/gi,function(match) {
    return stack[stackPtr++];
});
$('#page').html(target);
}

Answer 1

一种方法是创建一个包含所有可能的有效搜索词的数组。将术语设置为 #page 父元素中 <span> 个元素的 .textContent。

在 searchHighlight 函数中检查 searchTxt 是否与数组中的元素匹配。如果 searchTxt 匹配数组元素，select span 元素使用匹配数组元素的索引，在匹配的 #page span 元素处切换 "high" .className，否则通知用户 searchTxt 不匹配任何有效的搜索词。

$(function() {
  var words = [];
  var input = $("input[type=text]");
  var button = $("input[type=button][value=Search]");
  var reset = $("input[type=button][value=Reset]");
  var label = $("label");
  var page = $("#page");
  var contents = $("h1, p", page).contents()
    .filter(function() {
      return this.nodeType === 3 && /\w+/.test(this.nodeValue)
    }).map(function(i, text) {
      var span = text.nodeValue.split(/\s/).filter(Boolean)
        .map(function(word, index) {
          words.push(word);
          return "<span>" + word + "</span> "
        });
      $(text.parentElement).find(text).replaceWith(span);
    })
  var spans = $("span", page);
  button.on("click", function(event) {
    spans.removeClass("high");
    label.html("");
    if (input.val().length && /\w+/.test(input.val())) {
      var terms = input.val().match(/\w+/g);
      var indexes = $.map(terms, function(term) {
        var search = $.map(words, function(word, index) {
          return word.toLowerCase().indexOf(term.toLowerCase()) > -1 && index
        }).filter(Boolean);
        return search
      });
      if (indexes.length) {
        $.each(indexes, function(_, index) {
          spans.eq(index).addClass("high")
        })
      } else {
        label.html("Search term <em>" + input.val() + "</em> not found.");
      }
    }
  });
  reset.on("click", function(event) {
    spans.removeClass("high");
    input.val("");
    label.html("");
  })
})

.high {
  background-color: #caf;
}
label em {
  font-weight: bold;
  background-color: darkorange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<input type="button" value="Search" />
<input type="button" value="Reset" />
<label></label>
<div id="page" style="max-width:500px;border:1px solid #ccc;">
  <h1 style="margin:0px;">test of replace</h1>
  <p>After Luke comes to Dagobah, Yoda initially withholds his true identity. He’s trying to get a sense of who Luke is as a person; Yoda understands that there’s a lot at risk in training Luke to be a Jedi, especially considering what happened with his
    father.
    <img style="float:right;" width="200" src="http://a.dilcdn.com/bl/wp-content/uploads/sites/6/2013/11/04-400x225.jpg">And Yoda is not impressed — Luke is impatient and selfish. With “Adventure. Excitement. A Jedi craves not these things,” the Jedi Master makes clear that Luke must understand the significance and meaning of the journey he thinks he wants to make.
    It’s an important lesson for Luke and for audiences, because when Luke faces Vader at the film’s climax, we see the stakes involved in the life of a Jedi</p>
  <p>Now Yoda-search works, however a search on "sites" will break the image-link. (Yes, I know this implementation isn't perfect but I'm dealing with reality)</p>
</div>

如何从正则表达式替换中排除 jpeg-names？

Howto exclude jpeg-names from regexp replace?

javascript

regex

documentation