Javascript，使用 URL 查询字符串创建页面标题

Question

我将根据页面的URL查询字符串创建页面的标题

网址示例为：

domain.com/pricelist/phones/?min_price=0&max_price=50000

如果max_price = 50000，我的页面标题将是：50000卢比以下的电话

如果网址仅包含以下品牌：

domain.com/pricelist/phones/?brand=apple

页面标题将是： 苹果手机价目表 2018

如果网址同时包含价格和品牌，例如：

domain.com/pricelist/phones/?min_price=0&max_price=50000&brand=apple

页面标题：50000卢比以下的苹果手机

这是我的代码：-

<script>
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
vars[key] = value;
});
return vars;
}
var path = window.location.pathname;
var pathName = path.substring(0, path.lastIndexOf('/') + 1);
console.log(path);
console.log(pathName);
pathName = pathName.replace(///g, "")
pathName = pathName.replace(/pricelist/g, "")
pathName = pathName.replace(/bw/g, l => l.toUpperCase())
var number = getUrlVars()["max_price"];
var brand = getUrlVars()["brand"];
brand = brand.replace(/bw/g, l => l.toUpperCase())
if (window.location.href.indexOf("min_price") != null) {document.title = pathName + ' Under Rs. ' +  number;} 
if (window.location.href.indexOf("pa_brand") > -1) {document.title = brand + ' ' + pathName + ' Price List India';} 
if (window.location.href.indexOf("min_price") > -1 &&  window.location.href.indexOf("brand") > -1) {document.title = brand + ' ' + pathName + ' Under Rs.' + number;}
</script>

Answer 1

首先(在我看来(如果可以的话，我会尽量远离正则表达式。如果您还没有听说过URL搜索参数，则应阅读它。它使处理查询字符串变得非常简单。

我还更改了大写字母以不使用正则表达式(来源是这个答案(

现在对于if语句，这似乎您遇到了麻烦，请尝试逐步分解它。

首先，我看看maxPrice是否不为空，如果它不为空，那么很好，我们有我们的第一个标题：Phones Under Rs.${maxPrice}

接下来，我检查brand是否不为空(在maxPriceif内(，这样如果brand不是null我们可以安全地假设maxPrice也不是null，因此我们可以将消息更改为${brand} Phones Under Rs.${maxPrice}

现在，由于消息中有 2 个变量的唯一情况已经完成，我们可以从第一个if反弹并继续下降到else if。现在我检查brand是否null.如果brand不是null那么在这一点上我们可以假设maxPrice也是null的(否则代码会进入第一个if(，所以这给了我们最后一条消息${brand} Phones

现在终于有一个else的情况，以防万一我们错过了某些东西，我们可以记录它并轻松修复代码。

快速说明，如果您不熟悉字符串中的反引号，它们是模板文字

var theURL = "https://www.example.com?min_price=0&max_price=5000&brand=apple";
var parsedURL = new URL(theURL);
// you should use window.location.search instead
var searchParams = new URLSearchParams(parsedURL.search);
var maxPrice = searchParams.get("max_price");
var minPrice = searchParams.get("min_price");
var brand = searchParams.get("brand");
// capitalize brand if it is in the query
if (brand !== null) {
brand = brand.toLowerCase()
.split(' ')
.map((s) => s.charAt(0).toUpperCase() + s.substring(1))
.join(' ');
}
// create the title based off which query parameters come through
var title;
if (maxPrice !== null) {
title = `Phones Under Rs.${maxPrice}`
if (brand !== null) {
title = `${brand} Phones Under Rs.${maxPrice}`
}
} 
else if (brand !== null) {
title = `${brand} Phones Price list 2018`
} 
else {
console.log(`other case came through: brand: ${brand} max_price: ${maxPrice} min_price: ${minPrice}`)
}
console.log(title);

Answer 2

在我看来，你很难处理if/else语句，因为你给脚本带来了整体的复杂性。尝试使其更简单，构造条件将变得轻而易举。 我还没有测试过它，但请查看此解决方案：

function setTitle () {
const search = window.location.search
.substring(1)
.split('&')
.map(pair => pair.split('='))
.reduce((acc, pair) => {
acc[pair[0]] = pair[1];
return acc;
}, {});
const brandPart = search.brand ? `${search.brand} phones` : 'Phones';
const maxPricePart = search.max_price ? `under Rs.${search.max_price}` : '';
const pricePart = maxPricePart || 'Price list 2018';
document.title = `${brandPart} ${pricePart}`;
}

也许它有一些问题，但它更容易理解和维护。

Answer 3

你的代码看起来不错，我认为你可以改进 OR 作为替代解决方案，您可以首先创建所有查询参数的 JSON 格式。 基于JSON，您可以轻松创建品牌标题。

https://gomakethings.com/getting-all-query-string-values-from-a-url-with-vanilla-js/

//get query paraeters in json format
var getParams = function (url) {
var params = {};
var parser = document.createElement('a');
parser.href = url;
var query = parser.search.substring(1);
var vars = query.split('&');
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
params[pair[0]] = decodeURIComponent(pair[1]);
}
return params;
};
//get quer pareamaeter
var query_parameters = getParams(window.location.href);
var brand_name = '';
if ( query_parameters.max_price ) brand_name ="Phones Under Rs." + query_parameters.max_price;
if ( query_parameters.brand ) brand_name = query_parameters.brand.toUpperCase() + " phones Price list 2018"
if ( query_parameters.max_price && query_parameters.brand ) brand_name =query_parameters.brand.toUpperCase() + "phones Under Rs." + query_parameters.max_price;