0

The scenario is via a browser extension (Add-On) a link's Text of unknown length on a page is changed to another textual value. The new Textual value must be the same length as the original ensuring that the site's formatting is not altered in any way.

However, I just can't wrap my head around the logic - and I am not a Javascript coder which does not help any.

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;
}

UPDATE 1

link text prior to change could be like these examples

1) Download (8 chars) 2) Click to Download (17 chars) 3) Preview (7 chars) 4) http://somedomain.com/jhdfshjkhk (32 Characters)

link text after change would be 1) [ 404 ] (8 chars) 2) [ Removed ] (17 chars) 3) [ 404 ] (7 Chars) 4) [ Removed By 7ASecond ] (32 Chars)

The above code is incomplete but does show the idea I am attempting. Any and all help would be appreciated!

Dave Gordon
  • 1,815
  • 4
  • 30
  • 52

1 Answers1

1

The main problem is that depending on font used (if it's not monospaced) the width will change after replacement even if the amount of characters is the same.

Instead we'll read the current width and use it in the style property to keep the element's width.

The function parameter needs be the link element, not its text:

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";
}
wOxxOm
  • 65,848
  • 11
  • 132
  • 136
  • It looked good - but on closer inspection I see what is happening here. No, sorry you misunderstand. The link to be replaced is unknown - we don't know how long the link we are replacing will be until the link is found in the html. (we find it because someone clicks on it - context menu) Once they click on the link it should be replaced with a new link (href - which works) but also with a new text string which is of the same length as the original link text being replaced. So padding or some other method will need to be used. – Dave Gordon Dec 20 '15 at 00:54
  • It doesn't work because I do not know if the link text will be Download, click... or some arbitrary text. Also, I said many times that the resultant text must be the same length as the original text. Again, this code does not do that. – Dave Gordon Dec 20 '15 at 01:07
  • We are changing the text - the styling is already there according to the styling of the original text. A user right clicks on any link, selects our extension from the context menu. The link is replaced with a different Text and Href. The font difference will be too small to make a major layout change. – Dave Gordon Dec 20 '15 at 01:11
  • Sheeze - I have! The length will make a difference if actual font char size will make a little difference - but not much. As long as we have the same amount of chars in the text - including adding additional spaces it will be close enough! What do you need to know, specifically? – Dave Gordon Dec 20 '15 at 01:14
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/98453/discussion-between-woxxom-and-dave-gordon). – wOxxOm Dec 20 '15 at 01:14