使用查询字符串值安全地设置输入值
Setting input value with query string value safely
我有一个<input type="text">
,我想安全地将其值设置为"q"查询字符串。因为如果查询字符串包含特殊字符(+,#,...)
,JS将停止执行。
我已经尝试了encodeURIComponent()
和encodeURI()
,但是搜索框中的值也会被转义,因此您会在搜索框中得到一些奇怪的东西。
我也尝试了decodeURIComponent(encodeURIComponent())
但这将使JS停止执行。
另外,PHP不是我想使用的解决方案,所以即使它有效,我们也忘记PHP GET。
试试错误:http://smartsearch.altervista.org/?q=the+plus+character+breaks+the+code
正如你所看到的,面板不再工作(单击工具栏按钮,它们应该显示一个面板)。当没有包含特殊字符的查询字符串时,面板可以完美运行。
完整代码(正如某些人要求的那样):
$(function() {
if(getParameter("q") && getParameter("engine")) {
search(getParameter("q").replace("smartsearch://",""),getParameter("engine"));
}
else if(getParameter("engine")) {
$(".search-engine a[data-engine-shortname="+getParameter("engine")+"]").click();
}
else if(getParameter("q")) {
search(getParameter("q").replace("smartsearch://",""));
}
});
// Helper functions
function getParameter(name) {
name = name.replace(/['[]/, "'''[").replace(/[']]/, "''']");
var regex = new RegExp("[''?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/'+/g, " "));
}
function search(query,engine) {
var searchengine = engine || $(".search-engine.selected a").attr("data-engine-shortname");
var searchengineurl = $(".search-engine a[data-engine-shortname="+engine+"]").attr("data-engine-url") || $("#search-form").attr("action");
var searchquery = query || $("#search-input").val();
var currenturl = "?q=" + searchquery.split(' ').join('+') + "&engine=" + searchengine;
var icon = $(".search-engine a[data-engine-shortname="+engine+"] img").attr("src") || $(".search-engine.selected a img").attr("src");
if($.trim(searchquery) != "") {
$("#results-frame").attr("src",searchengineurl + searchquery);
$("title").html(searchquery + " - SmartSearch");
history.replaceState(null, null, currenturl);
if(engine) {
$(".search-engine a[data-engine-shortname="+engine+"]").click();
}
$("#search-input").val(searchquery);
$("#favourite-button").removeClass("starred disabled");
if(bookmarks.check(searchquery,searchengine)) {
$("#favourite-button").addClass("starred");
}
}
else {
$("title").html("SmartSearch");
$("#favourite-button").addClass("disabled");
$("#favourite-button").removeClass("starred");
if(bookmarks.check(searchquery,searchengine)) {
$("#favourite-button").addClass("starred");
}
}
}
如果您参考 https://www.rfc-editor.org/rfc/rfc3986#section-2.2
reserved = gen-delims / sub-delims gen-delims = ":" / "/" / "?" / "#" / "[" / "]" / "@" sub-delims = "!" / "$" / "&" / "'" / "(" / ")" / "*" / "+" / "," / ";" / "="
RFC继续说
如果 URI 组件的数据与保留的数据冲突字符作为分隔符的目的,则冲突数据必须是在形成 URI 之前进行百分比编码。
相关文章:
- 如果值为空,如何设置输入的默认值?jQuery
- 如何设置输入文本框jquery的值
- jQuery - 添加删除类 - 设置输入值
- 可以设置输入类型=文件的文本框的高度
- 在jquery中,从同一对象的属性设置输入字段和标签的正确方法是什么
- 设置输入类型月份的值
- 整数 + 2x 单选按钮设置输入 --> 输出
- jQuery timepicker:如何动态设置输入字段的minTime
- 设置输入类型=日期
- IE 9 jQuery未设置输入值
- React设置输入's值
- 使用jquery设置输入数组值
- 如何使用javascscript设置输入值
- 使用 javascript 设置输入标签的值
- 根据角度中的另一个字段设置输入字段的默认值
- 如何设置输入元素的值
- 如何在哈希中设置输入值
- 我如何在 jQuery 中以编程方式设置输入文本框的值
- Javascript在加载后设置输入值
- 无法使用 Javascript 设置输入的值