JavaScript或PHP语法高亮显示查询字符串？

Question

有很多语法高亮工具，但我从未见过支持突出显示查询字符串的工具！

我在寻找一款可以在记录我的API时使用的工具，而且由于是API，涉及到了很多查询字符串。那么，有哪些好的JavaScript或PHP语法高亮工具支持查询字符串呢？

我已经研究了Google代码美化器，highlight.js，prismjs和其他一些工具，但它们似乎都无法突出显示这个：

/oauth/authorize?client_id=wG2X7q1qz74zdSbgiFkyL5JFOeloQwg2opfrPfaJ&response_type=code&redirect_uri=https%3A%2F%2Fmyapplication.com%2Foauth&scope=account%2Ccompetition%2Cvideos&state=d41d8cd98f00b204e9800998ecf8427e

希望将所有键都突出显示为一种颜色，所有值都突出显示为另一种颜色，&?= 则使用不同的颜色... 类似于：

- Hailwood

---

真是个好问题。 - Brian Adkins

我不得不记录同样的内容，甚至从未考虑过询问...事实上，为什么Chrome/Firefox不对整个地址栏进行颜色编码呢？类似但不完全相同的请求：https://bug184074.bugzilla.mozilla.org/attachment.cgi?id=143118 - Brian Adkins

Answer 1

就我而言，在正确的URL中，名字/值中所有像'?', '&', '='这样的字符都应该被替换。这使得解析变得非常容易。

那么为什么不自己发明一些东西呢：

function parseQuery(query){
    parsed = query.split('?');
    if (parsed.length > 1) {
        parsed[1] = parsed[1].split('&');
        for(i in parsed[1]) {
            parsed[1][i] = parsed[1][i].split('=');
        }
    }
    retStr = '<span class="path">' + parsed[0] + '</span>';
    if (parsed.length > 1) {
        retStr += '<span class="qm">?</span>';
        first = true;
        for(i in parsed[1]) {
            if (first) {
                first = false;
            } else {
                retStr += '<span class="amp">&</span>';
            }
            retStr += '<span class="name">' + parsed[1][i][0] + '</span>';
            if (parsed[1][i].length > 1) {
                retStr += '<span class="eq">=</span>' +
                '<span class="value">' + parsed[1][i][1] + '</span>';
            }
            if (parsed[1][i].length > 2) {
                for (var j = 2; j < parsed[1][i].length; j++) {
                      retStr += '<span class="eq">=</span>';
                      retStr += '<span class="error">' + parsed[1][i][j] + '</span>';
                }
            }
        }
    }
    if (parsed.length > 2) {
        for (var i = 2; i < parsed.length; i++) {
              retStr += '<span class="qm">?</span>';
              retStr += '<span class="error">' + parsed[i] + '</span>';
        }
    }
    return retStr;
}

http://jsfiddle.net/YqrpV/1/

- fsw

---

你如何修改代码以支持跨多行进行高亮显示，例如在http://jsfiddle.net/YqrpV/2/中的格式化需求？ - Hailwood

将获取 b.innerHTML 的代码更改为 b.textContent，现在似乎可以正常工作了。parseQuery 操作的是字符串，而 innerHTML 传递了 &。http://jsfiddle.net/YqrpV/3/ - fsw

太棒了！我之前尝试使用innerText，但它没有起作用，不知道有textContent这个属性！ - Hailwood