Replacing GitHub usernames with links
$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.
javascript dom
New contributor
$endgroup$
add a comment |
$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.
javascript dom
New contributor
$endgroup$
add a comment |
$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.
javascript dom
New contributor
$endgroup$
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.
javascript dom
javascript dom
New contributor
New contributor
edited 2 hours ago
200_success
131k17156420
131k17156420
New contributor
asked 6 hours ago
LandonLandon
183
183
New contributor
New contributor
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
$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$
add a comment |
StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "196"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Landon is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f216685%2freplacing-github-usernames-with-links%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
$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$
add a comment |
$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$
add a comment |
$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$
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");
answered 5 hours ago
Oh My GoodnessOh My Goodness
2,069315
2,069315
add a comment |
add a comment |
Landon is a new contributor. Be nice, and check out our Code of Conduct.
Landon is a new contributor. Be nice, and check out our Code of Conduct.
Landon is a new contributor. Be nice, and check out our Code of Conduct.
Landon is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Code Review Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f216685%2freplacing-github-usernames-with-links%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown