怎么排除jpeg-name从regexp替换？ [英] Howto exclude jpeg-names from regexp replace?
问题描述
我正在使用文档网站的搜索功能，在选择带有文本的搜索点击显示页面（就像一个pdf阅读器或netbeans会做）。
为了获得高亮我使用javascript：
function searchHighlight（searchTxt）{
var target = $（ '＃页'）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
to
< img src =5334< span class =hl> 1000< / span> abababab - 。jpg>
是否可以使用regexp解决这个问题，不知何故将任何东西排除在.jpg之外？ p>
或者是否可以在使用占位符更换图像之前，更换后恢复为src？
示例：
- 替换所有< img *>与{{I-01}}，{{I-02}}等等，并将真正的src保存在一个var。
- 请执行以上替换。
- 从{{I-01}}还原到< img src =../>
DOM操作当然是一个选择，但是我认为这可以用regexp来做，但是，我的正则表达式技能缺乏严重性。
更新
此代码现在适用于我：
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 ++）+'}}';
}）;
//替换
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）;
}
一种方法是创建所有可能的有效搜索项的数组。将 .textContent 中的条款设置为< span> 元素 #page 父元素。
在 searchHighlight 功能检查 searchTxt 是否匹配元素在阵列内。如果 searchTxt 匹配数组元素，请使用匹配数组元素的索引选择 span 元素，然后切换高 .className 匹配的 #page span 元素，否则通知用户 searchTxt 与任何有效的搜索字词不匹配。
$（function（）{var words = []; var input = $（input [type = text]）; var button = $（input [type = button] [value = ]; 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（字）;返回< span> + word +< / span>}）; $（text.parentElement）.find（文本）.replaceWith（跨度）; }）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 ，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（搜索词< em>+ input.val ）+< / em> not found。）;}}}）; reset.on（click，function（event）{spans.removeClass（high）; input.val（）; label.html（）;}）}）/ pre>.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 = buttonvalue =Search/>< input type =buttonvalue =Reset/>< label>< / label>< div id =pagestyle =max-width ：500px; border：1px solid #ccc;> < h1 style =margin：0px;> test of replace< / h1>在卢克来到达格巴之后，尤达最初拒绝了他的真实身份。他试图了解卢克是谁的人;尤达了解到，在培养卢克成为一名绝地的人方面存在很大的风险，特别是考虑到他父亲发生了什么。 < img style =float：right;宽度=200src =http://a.dilcdn.com/bl/wp-content/uploads/sites/6/2013/11/04-400x225.jpg>而尤达并没有印象深刻 - 卢克是不耐烦和自私与冒险激动。一个绝地不渴望这些东西，绝地大师明确表示，卢克必须明白他想要的旅程的意义和意义。对于卢克和观众来说，这是一个重要的教训，因为当Luke在电影高潮时面对Vader时，我们看到了绝地生活中的风险< / p> < p>现在，Yoda搜索工作，但是在站点上的搜索将会破坏图像链接。 （是的，我知道这个实现并不完美，但我正在处理现实）< / p>< / div>
>
I'm using a search-function for a documentation site which upon selection of search hit shows page with text highlighted (just as a pdf-reader or netbeans would do).
To achive the highlight i use javascript with:
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);
}
Problem / Question:
Since page incudes images with filenames based on md5, some searches messes up the image src.
Searching on "1000" will distort the
<img src="53451000abababababa---.jpg"
to
<img src="5334<span class="hl">1000</span>abababab--.jpg">
Is it possible to solve this with regexp, somehow excluding anything anjcent to ".jpg"?
Or would it be possible to, before highligting replace the images with placeholders, and after replace revert back to src?
Example:
- replace all <img *> with {{I-01}}, {{I-02}} etc and keep the real src in a var.
- Do the replace above.
- Revert back from {{I-01}} to the <img src=".."/>
DOM-manipulation is of course an option, but I figure this could be done with regexp somehow, however, my regexp skills are lacking badly.
UPDATE This code works for me now:
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);
}
One approach would be to create an array of all possible valid search terms. Set the terms as .textContent of <span> elements within #page parent element.
At searchHighlight function check if searchTxt matches an element within array. If searchTxt matches an element of array, select span element using index of matched array element, toggle "high" .className at matched #page span element, else notify user that searchTxt does not match any valid search terms.
$(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-name从regexp替换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
