Javascript:将链接文本更改为新文本填充或收缩文本以保持其与原始文本的大小相同

Question

该场景是通过浏览器扩展(附加组件)将页面上未知长度的链接文本更改为另一个文本值。新文本值的长度必须与原始值相同，以确保网站的格式不会以任何方式更改。

但是，我就是无法理解其中的逻辑 - 而且我不是 Javascript 编码员，这对任何事情都没有帮助。

var GenerateNewLinkText = function(txt) {
    var tLen = txt.length; // text original Length
    var ls = "404";
    var lm1 = "Removed";
    var lm2 = "7ASecond";
    var ll = "Removed By 7ASecond";
    var nText = "[";
    var letterCounter = 0;

    for (var idx = 0; idx < (tLen-2); idx++) {
        if (tLen < 5) {
            nText += ".";
        }
        else if (tLen >= 5 || tLen < 9) {
            var extraChars = tLen - ls;
        }
    }
    nText += "]";
    return nText;
}

更新1

更改之前的链接文本可能类似于这些示例

1) 下载(8 个字符)2) 点击下载(17个字符)3) 预览(7 个字符)4)http://somedomain.com/jhdfshjkhk (32 个字符)

更改后的链接文本将是1) [ 404 ](8 个字符)2) [ 已删除 ] (17 个字符)3) [ 404 ](7 个字符)4) [ 已被 7ASecond 删除 ] (32 个字符)

上面的代码不完整，但确实显示了我正在尝试的想法。任何和所有帮助将不胜感激!

Answer 1

主要问题是，根据使用的字体(如果不是等宽字体)，即使字符数量相同，替换后宽度也会发生变化。

相反，我们将读取当前宽度并在 style 属性中使用它来保持元素的宽度。

函数参数必须是链接元素，而不是其文本:

var GenerateNewLinkText = function(link) {
    var replacements = {
        "Download": "404",
        "Click to Download": "Removed",
        "Preview": "404",
        "https?://.+": ""
    };
    var allPatterns = new RegExp(Object.keys(replacements).join("|"));

    var width = link.offsetWidth;
    link.textContent = link.textContent.replace(allPatterns, function(s) {
        return "[" + (replacements[s] || "Removed By 7ASecond") + "]";
    });
    link.style.paddingRight = (width - link.offsetWidth) + "px";
}