3
\$\begingroup\$

A user wrote an issue asking if inside the bio (or any arbitrary tag), any tagged accounts can be automatically linked like on Github.

I gave them this function:

  <script>
    let bio = "The coolest company to work for is @github!  There is also @aws and @microsoft.";
    let linkedBio = "";
    let found = false;
    let link = "";
    for (let i = 0; i < bio.length; i++) {
      let currentChar = bio[i];

      if (currentChar.startsWith("@")) {
        link += currentChar;
        found = true;
        continue // we don't need to look at other chars until next iterations
      }

      if (found) {
        if (/[^A-Za-z0-9]/.test(currentChar)) { // we found the end of the link (you can add more special chars to this)
          let tag = "<a href=https://github.com/" + link.substr(1) + ">" + link + "</a>"
          linkedBio += tag + currentChar // we add the special char at the end of the tag so that it actually appears, otherwise it does not
          link = "";
          found = false;
        } else {
          link += currentChar;
        }
      } else {
        linkedBio += currentChar;
      }
    }

    if (link.length > 0) { // means we need to add a link that is the last possible thing without anything after it
      let tag = "<a href=https://github.com/" + link.substr(1) + ">" + link + "</a>"
      linkedBio += tag
    }

    document.getElementById("bio").innerHTML = linkedBio
  </script>

I was going to use string.split(" "), but then I realized that if I did that I would destroy the specific formatting of the text if I used array.join(" ") after all of the formatting changes.

Ex: Original: "I work for the coolest companies: @aws, @microsoft, and @apple"

Joined: "I work for the coolest companies: @aws , @microsoft , and @apple"

The commas are messed up.

Is there a way to slim it down and/or simplify it? JS isn't my strongest language.

\$\endgroup\$
3
\$\begingroup\$

The function you want is replace:

function link_ats(text) { 
    return text.replace( /@(\w+)/g, '<a href=https://github.com/$1>@$1</a>' ) 
}

document.getElementById("bio").innerHTML = link_ats("The coolest company to work for is @github!  There is also @aws and @microsoft.", "bio");
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.