获取和错误(非自然功能),同时在jquery中从页面搜索文本
Getting & error(unnatural functionality ) while search a text from page in jquery?
我正在从页面搜索文本。一切都很好。但是只有一个问题,当用户搜索和它搜索时,还要用amp附加数据。你能告诉我为什么会这样吗?
这是我的小提琴:http://jsfiddle.net/ravi1989/wjLmx/22/
请输入 &,然后单击搜索,再次单击搜索,搜索,接下来查找问题。
function searchAndHighlight(searchTerm, selector) {
if (searchTerm) {
//var wholeWordOnly = new RegExp("''g"+searchTerm+"''g","ig"); //matches whole word only
//var anyCharacter = new RegExp("''g["+searchTerm+"]''g","ig"); //matches any word with any of search chars characters
var selector = selector || "#realTimeContents"; //use body as selector if none provided
var searchTermRegEx = new RegExp(searchTerm, "ig");
var matches = $(selector).text().match(searchTermRegEx);
if (matches != null && matches.length > 0) {
$('.highlighted').removeClass('highlighted'); //Remove old search highlights
//Remove the previous matches
$span = $('#realTimeContents span');
$span.replaceWith($span.html());
$(selector).html($(selector).html().replace(searchTermRegEx, "<span class='match'>" + searchTerm + "</span>"));
$('.match:first').addClass('highlighted');
var i=0;
$('.next_h').off('click').on('click', function () {
i++;
if(i >= $('.match').length)
i=0;
$('.match').removeClass('highlighted');
$('.match').eq(i).addClass('highlighted');
});
$('.previous_h').off('click').on('click', function () {
i--;
if(i < 0)
i=$('.match').length-1;
$('.match').removeClass('highlighted');
$('.match').eq(i).addClass('highlighted');
});
if ($('.highlighted:first').length) { //if match found, scroll to where the first one appears
$(window).scrollTop($('.highlighted:first').position().top);
}
return true;
}
}
return false;
}
$(document).on('click', '.searchButtonClickText_h', function (event) {
$(".highlighted").removeClass("highlighted").removeClass("match");
if (!searchAndHighlight($('.textSearchvalue_h').val())) {
alert("No results found");
}
});
在 HTML 中,要获取字符&
,请使用字符实体:&
。因此,在搜索HTML文本时,您一定会找到这些(您可能还会找到<
和
以及其他字符实体(。您的代码采用以下 HTML:
&
。并将其更改为:
<span class="match highlighted">&</span>amp;
。所以你在文本中看到amp;
。
这是该代码的一般问题的具体示例。不幸的是,我认为代码采用的方法太复杂而无法纠正。我认为为了解决这整类问题,您根本不要在 HTML 中进行替换。相反,循环遍历匹配元素中的文本节点,并在其nodeValue
上进行替换,这将是普通字符串(仅包含&
等(,而不是 HTML 编码的实体。您必须使用 splitText
拆分文本节点(两次,在要替换的文本之前和之后(,然后将中间位放入您通过 createElement
创建的span
中,将span
插入第二个拆分点的前面。
这将是通用的解决方案:不要尝试在HTML上做replace
。
现在,您可以非常轻松地解决这个特定的错误,方法是将其放在HTML上替换的行之前: 小提琴
if (searchTerm === "&") {
searchTerm = "&";
searchTermRegEx = new RegExp(searchTerm, "ig");
}
。但这并不能解决一般问题。解决一般问题可能需要完全改变您的方法,使用文本节点等,如前所述。
旁注:您将用户的搜索词直接传递到 RegExp
构造函数中。您真的希望您的用户正确键入正则表达式吗?例如,如果他们键入[
,结果将是无效的正则表达式。如果你想从字面上搜索他们键入的内容,你必须不使用正则表达式,或者转义正则表达式中的特殊字符。
- jQuery文本属性中的Html代码
- JQuery文本区域字母表
- jquery文本输入框传递给变量
- jQuery文本解析器
- JQuery文本旋转器
- jQuery文本返回NULL
- 使用WP UI从选项卡到选项卡的Jquery文本链接
- 正在寻找类似于mircrosoft office autocorrect的jquery文本区域脚本
- JQuery文本编辑器-在工具栏中添加其他下拉列表
- jQuery文本未使用fadeIn正确显示
- jQuery文本区域计数器
- Jquery 文本区域未更新
- 在它们之间切换时,jQuery 文本显示在活动文本下方
- Jquery文本输入行为搞笑
- 在 jQuery 文本区域中编辑 Div 内容
- jQuery文本html操作,以查找大量文本中出现的字符,然后更改其颜色
- 需要 Jquery 文本动画自定义帮助
- Jquery 文本动画
- Jquery - 文本等于(邮件输入错误)
- 将 jquery 文本替换为 TM 字符实体,并用 jquery 替换