根据 URL 变量过滤 HTML 内容答案

【问题标题】：Filtering HTML content based on URL Variable根据 URL 变量过滤 HTML 内容
【发布时间】：2013-07-30 18:55:55
【问题描述】：

我正在寻找一种可以基于 URL 中的变量隐藏特定 HTML 内容的方法。

例如，我传递一个变量：index.html?app=new

我有各种具有 prod 属性的图像和其他内容，我想只显示那些具有“新”prod 值的内容。

<img prod="new" class="image" src="../images/screen.png" height="300" width="600"/>

我使用以下方法来获取 url 变量：

<script>  
  function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
    function(m,key,value) {
    vars[key] = value;
    });
    return vars;
  }
</script>

我的问题是从这里去哪里

【问题讨论】：

标签： html css url filtering

【解决方案1】：

我认为这个 CSS 规则会为你带来魔力：

[prod]:not([prod=new]) { display:none; }

它将隐藏所有具有“prod”属性且值不是“new”的元素。

【讨论】：

我确实觉得这很有趣并且也尝试过。我对此的困境（我在最初的请求中没有说明）是；如果变量有另一个值，我该如何编码？也就是说，在可能有多个值适用的情况下，我该如何处理？ (app=new, app=whatever)

【解决方案2】：

这是未经测试的代码。

HTML

<img data-prod="new" class="image" src="../images/screen.png" height="300" width="600" />

JavaScript

<script>  
    (function(){
    'use strict';

    var getUrlVars = function() {
        var vars = {};

        window.location.href.replace(
            /[?&]+([^=&]+)=([^&]*)/gi,
            function(m,key,value) {
                vars[key] = value;
            }
        );
        return vars;
    };

    if(typeof getUrlVars.app === 'string' && getUrlVars.app === 'new') {
        var c = document.querySelectorAll('[data-prod="new"]'), i;
        for(i = 0; i < c.length; i+=1) {
            c[i].style.display = 'none';
        }
    }
    })();
</script>

在一般情况下（即 app=new、app=whatever），您可以将 querySelectorAll 参数中的 new 替换为变量本身：

if(typeof getUrlVars.app === 'string') {
    var c = document.querySelectorAll('[data-prod="' + getUrlVars.app + '"]'), i;
    for(i = 0; i < c.length; i+=1) {
        c[i].style.display = 'none';
    }
}

【讨论】：