☰

Greasy Fork is available in English.

AO3: highlight tags V2

Configure tags to be highlighted with different colors

// ==UserScript==
// @name        AO3: highlight tags V2
// @description Configure tags to be highlighted with different colors
// @namespace   http://greasyfork.org/users/6872-fangirlishness
// @author      Fangirlishness 
// @require     http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
// @include     http://archiveofourown.org/*
// @include     https://archiveofourown.org/*
// @grant       none
// @version     2.0
// ==/UserScript==
/* eslint-env jquery */

// loosely derived from tuff-ghost's ao3 hide some tags (with permission)

(function($) {

/**** CONFIG ********************/

    // add the tag pattern you want to highlight (can appear anywhere in the tag) and the color for each
    // if you only want to highlight tags of a certain kind, start with with the kind of tag, then an exclamation mark, then your text.
    // Possible starting values are "relationships!", "characters!", "freeforms!"

    var tagsToHighlight = {"Alternate Universe": "#fda7d1", // pink
                           "Fanart": "#adf7d1", // light green
                           "somethingelse": "blue", // named colors work too
                           "^Hurt": "#038200", // only tags that start with Hurt
                           "Comfort$": "#038200", // only tags that end with Comfort
                           "relationships!Arthur": "red", // relationship tags that contain 'Arthur'
                           }; 

/********************************/
    $('.blurb ul.tags, .meta .tags ul').each(function() {
        var $list = $(this);
        $list.find('a.tag').each(function() {        
            var $tag = $(this);
            var text = $tag.text();
            for (var key in tagsToHighlight) {
                var color = tagsToHighlight[key];
                // parse out tagtype from key and save it as a classname (prepend .)
                if(key.startsWith('relationships!') || key.startsWith('characters!') || key.startsWith('freeforms!') ) {
                    var tagtype = "."+key.substring(0, key.indexOf('!')); 
                    key = key.substring(key.indexOf('!')+1);
                }
                // match on key without type
                var pattern = new RegExp(key, "g") 
                if(text.match(pattern) != null) {
                    highlightTag($tag, color, tagtype);
                }
            }
        });
    });

    function highlightTag($tag, color, tagtype) {
        // if tagtype is given, color only tags with that class
        if(tagtype) {
            $tag.parent(tagtype).children().first().css('background-color', color);
        }
        else {
            $tag.css('background-color', color);
        }
    }
        
})(jQuery);