falsch gepostete links klickbar machen

[GottZ]

Allgemeine Informationen

Browser: Alle

Version: Alle

Modul: neu

Description

falsch gepostete links klickbar machen:

/(?:(?:new|top)(?:[^\\]+?)?|user\/[^\\]+?\/(?:uploads|likes))\/\d+(?::comment\d+)?\b/g.exec(text)
dies würde die entsprechenden stellen raus suchen.
im result sind auch die koordinaten der matches zu finden.
ich mache das issue nur auf damit man darüber mal diskutieren kann.

evtl finde ich die tage mal zeit das einzubauen und nen pull request zu erstellen.
außerdem müsste man das sinnvollerweise über den DOM tree iterieren lassen.
(hab ich alles schon mal gemacht also alles kein problem.)

[GottZ]

obsolete. siehe weiter unten

kleiner funktionsfähiger proof of concept mit aktualisierter regex:
https://regex101.com/r/LY0Q2h/3

const textWalker = (node, callback) => {
    const nodes = [node];
    while (nodes.length > 0) {
        node = nodes.shift();
        for (let i = 0; i < node.childNodes.length; i++) {
            const child = node.childNodes[i];
            if (child.nodeType === child.TEXT_NODE) callback(child);
            // FYI: this "if" can be omitted if you want to also do stuff with text inside links
            else if(child.nodeName !== "A") nodes.push(child);
        }
    }
};

const createLink = href => {
    const element = document.createElement("a");
    element.href = href;
    element.textContent = href;
    return element;
};

[...document.querySelectorAll(".comment-content")].forEach(parent => {
    textWalker(parent, node => {
        const cont = document.createDocumentFragment();
        node.nodeValue
            // https://regex101.com/r/LY0Q2h/3
            .split(/(?<=^|[^\w\/])(\/?(?:(?:new|top)(?:\/[^\/\s]+?)?|user\/[^\/\s]+?\/(?:uploads|likes))\/\d+(?::comment\d+)?)\b/g)
            .map((string, index) => index %2 == 0 ? document.createTextNode(string) : createLink(string))
            .filter(node => node.nodeType !== node.TEXT_NODE || node.nodeValue !== "")
            .forEach(node => cont.appendChild(node));
        node.parentNode.replaceChild(cont, node);
    });
});

beispiel: https://pr0gramm.com/new/3167157:comment29552629

basierend auf einer SO lösung die ich vor ewigkeiten mal geschrieben habe: https://stackoverflow.com/questions/31851180/how-do-i-replace-all-instances-of-prices-beginning-with-us-in-html-page-usi/31852811#31852811

vorzugsweise sollte das mit fastdom gekoppelt werden um node.parentNode.replaceChild(cont, node); zu delayen.

könnte man natürlich auch mit nem requestAnimationFrame und ner replace queue lösen. was anderes macht fastdom ja auch nicht.
(dom read, ..., dom write, ...)

müsste man im performance tab mal analysieren. denke schon dass das nen vorteil hätte.

PS: pr0 nutzt ember und ember hat jquery mittlerweile deprecated um genau solche probleme zu lösen.

hier weiter lesen:

pr0 überschreibt den String prototype. ich denke mal man könnte hier bestimmt was injecten.

String.prototype.urlsToHTML

zitat:

function(node) {
  return this.replace(/\b(https?:\/\/(?:www\.)?|www\.)([^\s()<>]+(?:\([\w\d]+\)|([^,\.\(\)<>!?\s]|\/)))/g, function(commaParam, canCreateDiscussions, url) {
    if (canCreateDiscussions === "www.") {
      commaParam = "http://" + commaParam;
    }
    commaParam = commaParam.replace(/@/g, "&#64;");
    url = url.replace(/@/g, "&#64;");
    var path = null;
    if (path = url.match(new RegExp("^" + CONFIG.HOST + "(/.*?)$"))) {
      return '<a href="' + path[1] + '">' + path[1] + "</a>";
    } else {
      return '<a href="' + commaParam + '" target="_blank" rel="noopener noreferrer">' + url.shortenMid(node) + "</a>";
    }
  });
};

ich bastel das mal um wenn ich zeit finde.

[GottZ]

// ==UserScript==
// @name         pr0 links
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       GottZ
// @match        https://pr0gramm.com/*
// @grant        unsafeWindow
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    const old = unsafeWindow.String.prototype.urlsToHTML;

    unsafeWindow.String.prototype.urlsToHTML = function(...args) {
        const rel = this.replace(/(?<=^|[^\w\/])(\/?(?:(?:new|top)(?:\/[^,\.\(\)<>!?\s]+?)?|user\/[^,\.\(\)<>!?\s]+?\/(?:uploads|likes))\/\d+(?::comment\d+)?)\b/g, function (relative) {
            if (relative[0] !== "/") relative = "/" + relative;
            return "https://" + unsafeWindow.CONFIG.HOST + relative;
        });

        return old.call(rel, ...args);
    };

})();

damit klappts.

wichtig ist: // @run-at document-end da sonst der prototype noch nicht überschrieben wurde.

ne idee wo man das am besten rein patchen könnte?