Replacing certain words with links?
Say I define a constant list as follows:
const SHOWS = {
'Game of Thrones': 'Game_of_Thrones',
'Modern Family': 'Modern_Family'
};
What I want to do is create a function that, when a user types in a string, recognizes if the input is either 'Game of Thrones' or 'Modern Family' and then replace it with the link to its wikipedia page (https://en.wikipedia.org/wiki/Modern_Family / https://en.wikipedia.org/wiki/Game_of_Thrones). I'm a bit stuck on how to do this, though. Could anyone help me out?
javascript html tagging
asked Nov 12 '18 at 18:29
DJLDJL
31
add a comment |
Say I define a constant list as follows:
const SHOWS = {
'Game of Thrones': 'Game_of_Thrones',
'Modern Family': 'Modern_Family'
};
What I want to do is create a function that, when a user types in a string, recognizes if the input is either 'Game of Thrones' or 'Modern Family' and then replace it with the link to its wikipedia page (https://en.wikipedia.org/wiki/Modern_Family / https://en.wikipedia.org/wiki/Game_of_Thrones). I'm a bit stuck on how to do this, though. Could anyone help me out?
javascript html tagging
asked Nov 12 '18 at 18:29
DJLDJL
31
Have your attempted anything?
– Heretic Monkey
Nov 12 '18 at 18:37
add a comment |
Say I define a constant list as follows:
const SHOWS = {
'Game of Thrones': 'Game_of_Thrones',
'Modern Family': 'Modern_Family'
};
What I want to do is create a function that, when a user types in a string, recognizes if the input is either 'Game of Thrones' or 'Modern Family' and then replace it with the link to its wikipedia page (https://en.wikipedia.org/wiki/Modern_Family / https://en.wikipedia.org/wiki/Game_of_Thrones). I'm a bit stuck on how to do this, though. Could anyone help me out?
javascript html tagging
asked Nov 12 '18 at 18:29
DJLDJL
31
Say I define a constant list as follows:
const SHOWS = {
'Game of Thrones': 'Game_of_Thrones',
'Modern Family': 'Modern_Family'
};
What I want to do is create a function that, when a user types in a string, recognizes if the input is either 'Game of Thrones' or 'Modern Family' and then replace it with the link to its wikipedia page (https://en.wikipedia.org/wiki/Modern_Family / https://en.wikipedia.org/wiki/Game_of_Thrones). I'm a bit stuck on how to do this, though. Could anyone help me out?
javascript html tagging
javascript html tagging
asked Nov 12 '18 at 18:29
DJLDJL
31
asked Nov 12 '18 at 18:29
DJLDJL
31
asked Nov 12 '18 at 18:29
DJLDJL
31
asked Nov 12 '18 at 18:29
DJLDJL
31
asked Nov 12 '18 at 18:29
DJLDJL
31
31
Have your attempted anything?
– Heretic Monkey
Nov 12 '18 at 18:37
add a comment |
Have your attempted anything?
– Heretic Monkey
Nov 12 '18 at 18:37
Have your attempted anything?
– Heretic Monkey
Nov 12 '18 at 18:37
Have your attempted anything?
– Heretic Monkey
Nov 12 '18 at 18:37
add a comment |
5 Answers
5
active
oldest
votes
If you want a easy solution HTML Data Taglist could be the one for you.
More simple solutions are not know to me personally. If you need it more individual, you have to implement your own wrapper or search for a out-of-the-box widget, somewhere in the web
answered Nov 12 '18 at 18:34
Jonathan StellwagJonathan Stellwag
730617
add a comment |
Use
var x="https://en.wikipedia.org/wiki/"+document.getElementById("user_input").value;
then
document.getElementById("link").innerHTML='<a href='+x+'>document.getElementById("user_input").value</a>'
answered Nov 12 '18 at 18:37
Himanshu AhujaHimanshu Ahuja
614216
add a comment |
Use this function. If it finds it in SHOWS then it will output a link, otherwise it will just spit back out what input value is (without a link to wikipedia).
function findFragment(input) {
var wikiFragment = SHOWS[input];
if (wikiFragment) {
return '<a href="https://en.wikipedia.org/wiki/' + wikiFragment + '">' + input + '</a>';
} else {
return input;
}
}
answered Nov 12 '18 at 18:42
TallboyTallboy
6,3521047122
add a comment |
Try this- you'll need a new div with an id of 'links' and you'll want to call checkInput with the string:
const SHOWS = {
'Game of Thrones': 'Game_of_Thrones',
'Modern Family': 'Modern_Family'
};
const wLink = 'https://en.wikipedia.org/wiki/';
function createLink(input){
document.getElementById("links").innerHTML += '<a href="' + (wLink + input) + '">'+(wLink + input)+'</a><br />';
}
function checkInput(input){
if(input in SHOWS){
createLink(SHOWS[input]);
}
}
checkInput('Game of Thrones');
answered Nov 12 '18 at 18:43
arcscparcscp
1396
add a comment |
Small example
const SHOWS = {
'game of thrones': 'Game_of_Thrones',
'modern family': 'Modern_Family'
};
function showLink(e) {
const val = e.target.value.toLowerCase();
const link = document.querySelector('.link');
if (SHOWS.hasOwnProperty(val)) {
const generatedLink = `https://en.wikipedia.org/wiki/${SHOWS[val]}`;
link.setAttribute('href', generatedLink);
link.innerText = generatedLink;
link.classList.add('visible');
return;
}
link.classList.remove('visible');
}
document.getElementById('input').addEventListener('input', showLink);.link {
opacity: 0;
}
.visible {
opacity: 1;
}<input id="input" type="text" />
<a class="link" href=""></a>answered Nov 12 '18 at 19:06
Sebix468Sebix468
91
add a comment |
Your Answer
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: "1"
};
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: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
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
});
}
});
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%2fstackoverflow.com%2fquestions%2f53268056%2freplacing-certain-words-with-links%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
If you want a easy solution HTML Data Taglist could be the one for you.
More simple solutions are not know to me personally. If you need it more individual, you have to implement your own wrapper or search for a out-of-the-box widget, somewhere in the web
answered Nov 12 '18 at 18:34
Jonathan StellwagJonathan Stellwag
730617
add a comment |
If you want a easy solution HTML Data Taglist could be the one for you.
More simple solutions are not know to me personally. If you need it more individual, you have to implement your own wrapper or search for a out-of-the-box widget, somewhere in the web
answered Nov 12 '18 at 18:34
Jonathan StellwagJonathan Stellwag
730617
add a comment |
If you want a easy solution HTML Data Taglist could be the one for you.
More simple solutions are not know to me personally. If you need it more individual, you have to implement your own wrapper or search for a out-of-the-box widget, somewhere in the web
answered Nov 12 '18 at 18:34
Jonathan StellwagJonathan Stellwag
730617
If you want a easy solution HTML Data Taglist could be the one for you.
More simple solutions are not know to me personally. If you need it more individual, you have to implement your own wrapper or search for a out-of-the-box widget, somewhere in the web
answered Nov 12 '18 at 18:34
Jonathan StellwagJonathan Stellwag
730617
answered Nov 12 '18 at 18:34
Jonathan StellwagJonathan Stellwag
730617
answered Nov 12 '18 at 18:34
Jonathan StellwagJonathan Stellwag
730617
answered Nov 12 '18 at 18:34
Jonathan StellwagJonathan Stellwag
730617
730617
add a comment |
add a comment |
Use
var x="https://en.wikipedia.org/wiki/"+document.getElementById("user_input").value;
then
document.getElementById("link").innerHTML='<a href='+x+'>document.getElementById("user_input").value</a>'
answered Nov 12 '18 at 18:37
Himanshu AhujaHimanshu Ahuja
614216
add a comment |
Use
var x="https://en.wikipedia.org/wiki/"+document.getElementById("user_input").value;
then
document.getElementById("link").innerHTML='<a href='+x+'>document.getElementById("user_input").value</a>'
answered Nov 12 '18 at 18:37
Himanshu AhujaHimanshu Ahuja
614216
add a comment |
Use
var x="https://en.wikipedia.org/wiki/"+document.getElementById("user_input").value;
then
document.getElementById("link").innerHTML='<a href='+x+'>document.getElementById("user_input").value</a>'
answered Nov 12 '18 at 18:37
Himanshu AhujaHimanshu Ahuja
614216
Use
var x="https://en.wikipedia.org/wiki/"+document.getElementById("user_input").value;
then
document.getElementById("link").innerHTML='<a href='+x+'>document.getElementById("user_input").value</a>'
answered Nov 12 '18 at 18:37
Himanshu AhujaHimanshu Ahuja
614216
answered Nov 12 '18 at 18:37
Himanshu AhujaHimanshu Ahuja
614216
answered Nov 12 '18 at 18:37
Himanshu AhujaHimanshu Ahuja
614216
answered Nov 12 '18 at 18:37
Himanshu AhujaHimanshu Ahuja
614216
614216
add a comment |
add a comment |
Use this function. If it finds it in SHOWS then it will output a link, otherwise it will just spit back out what input value is (without a link to wikipedia).
function findFragment(input) {
var wikiFragment = SHOWS[input];
if (wikiFragment) {
return '<a href="https://en.wikipedia.org/wiki/' + wikiFragment + '">' + input + '</a>';
} else {
return input;
}
}
answered Nov 12 '18 at 18:42
TallboyTallboy
6,3521047122
add a comment |
Use this function. If it finds it in SHOWS then it will output a link, otherwise it will just spit back out what input value is (without a link to wikipedia).
function findFragment(input) {
var wikiFragment = SHOWS[input];
if (wikiFragment) {
return '<a href="https://en.wikipedia.org/wiki/' + wikiFragment + '">' + input + '</a>';
} else {
return input;
}
}
answered Nov 12 '18 at 18:42
TallboyTallboy
6,3521047122
add a comment |
Use this function. If it finds it in SHOWS then it will output a link, otherwise it will just spit back out what input value is (without a link to wikipedia).
function findFragment(input) {
var wikiFragment = SHOWS[input];
if (wikiFragment) {
return '<a href="https://en.wikipedia.org/wiki/' + wikiFragment + '">' + input + '</a>';
} else {
return input;
}
}
answered Nov 12 '18 at 18:42
TallboyTallboy
6,3521047122
Use this function. If it finds it in SHOWS then it will output a link, otherwise it will just spit back out what input value is (without a link to wikipedia).
function findFragment(input) {
var wikiFragment = SHOWS[input];
if (wikiFragment) {
return '<a href="https://en.wikipedia.org/wiki/' + wikiFragment + '">' + input + '</a>';
} else {
return input;
}
}
answered Nov 12 '18 at 18:42
TallboyTallboy
6,3521047122
answered Nov 12 '18 at 18:42
TallboyTallboy
6,3521047122
answered Nov 12 '18 at 18:42
TallboyTallboy
6,3521047122
answered Nov 12 '18 at 18:42
TallboyTallboy
6,3521047122
6,3521047122
add a comment |
add a comment |
Try this- you'll need a new div with an id of 'links' and you'll want to call checkInput with the string:
const SHOWS = {
'Game of Thrones': 'Game_of_Thrones',
'Modern Family': 'Modern_Family'
};
const wLink = 'https://en.wikipedia.org/wiki/';
function createLink(input){
document.getElementById("links").innerHTML += '<a href="' + (wLink + input) + '">'+(wLink + input)+'</a><br />';
}
function checkInput(input){
if(input in SHOWS){
createLink(SHOWS[input]);
}
}
checkInput('Game of Thrones');
answered Nov 12 '18 at 18:43
arcscparcscp
1396
add a comment |
Try this- you'll need a new div with an id of 'links' and you'll want to call checkInput with the string:
const SHOWS = {
'Game of Thrones': 'Game_of_Thrones',
'Modern Family': 'Modern_Family'
};
const wLink = 'https://en.wikipedia.org/wiki/';
function createLink(input){
document.getElementById("links").innerHTML += '<a href="' + (wLink + input) + '">'+(wLink + input)+'</a><br />';
}
function checkInput(input){
if(input in SHOWS){
createLink(SHOWS[input]);
}
}
checkInput('Game of Thrones');
answered Nov 12 '18 at 18:43
arcscparcscp
1396
add a comment |
Try this- you'll need a new div with an id of 'links' and you'll want to call checkInput with the string:
const SHOWS = {
'Game of Thrones': 'Game_of_Thrones',
'Modern Family': 'Modern_Family'
};
const wLink = 'https://en.wikipedia.org/wiki/';
function createLink(input){
document.getElementById("links").innerHTML += '<a href="' + (wLink + input) + '">'+(wLink + input)+'</a><br />';
}
function checkInput(input){
if(input in SHOWS){
createLink(SHOWS[input]);
}
}
checkInput('Game of Thrones');
answered Nov 12 '18 at 18:43
arcscparcscp
1396
Try this- you'll need a new div with an id of 'links' and you'll want to call checkInput with the string:
const SHOWS = {
'Game of Thrones': 'Game_of_Thrones',
'Modern Family': 'Modern_Family'
};
const wLink = 'https://en.wikipedia.org/wiki/';
function createLink(input){
document.getElementById("links").innerHTML += '<a href="' + (wLink + input) + '">'+(wLink + input)+'</a><br />';
}
function checkInput(input){
if(input in SHOWS){
createLink(SHOWS[input]);
}
}
checkInput('Game of Thrones');
answered Nov 12 '18 at 18:43
arcscparcscp
1396
answered Nov 12 '18 at 18:43
arcscparcscp
1396
answered Nov 12 '18 at 18:43
arcscparcscp
1396
answered Nov 12 '18 at 18:43
arcscparcscp
1396
1396
add a comment |
add a comment |
Small example
const SHOWS = {
'game of thrones': 'Game_of_Thrones',
'modern family': 'Modern_Family'
};
function showLink(e) {
const val = e.target.value.toLowerCase();
const link = document.querySelector('.link');
if (SHOWS.hasOwnProperty(val)) {
const generatedLink = `https://en.wikipedia.org/wiki/${SHOWS[val]}`;
link.setAttribute('href', generatedLink);
link.innerText = generatedLink;
link.classList.add('visible');
return;
}
link.classList.remove('visible');
}
document.getElementById('input').addEventListener('input', showLink);.link {
opacity: 0;
}
.visible {
opacity: 1;
}<input id="input" type="text" />
<a class="link" href=""></a>answered Nov 12 '18 at 19:06
Sebix468Sebix468
91
add a comment |
Small example
const SHOWS = {
'game of thrones': 'Game_of_Thrones',
'modern family': 'Modern_Family'
};
function showLink(e) {
const val = e.target.value.toLowerCase();
const link = document.querySelector('.link');
if (SHOWS.hasOwnProperty(val)) {
const generatedLink = `https://en.wikipedia.org/wiki/${SHOWS[val]}`;
link.setAttribute('href', generatedLink);
link.innerText = generatedLink;
link.classList.add('visible');
return;
}
link.classList.remove('visible');
}
document.getElementById('input').addEventListener('input', showLink);.link {
opacity: 0;
}
.visible {
opacity: 1;
}<input id="input" type="text" />
<a class="link" href=""></a>answered Nov 12 '18 at 19:06
Sebix468Sebix468
91
add a comment |
Small example
const SHOWS = {
'game of thrones': 'Game_of_Thrones',
'modern family': 'Modern_Family'
};
function showLink(e) {
const val = e.target.value.toLowerCase();
const link = document.querySelector('.link');
if (SHOWS.hasOwnProperty(val)) {
const generatedLink = `https://en.wikipedia.org/wiki/${SHOWS[val]}`;
link.setAttribute('href', generatedLink);
link.innerText = generatedLink;
link.classList.add('visible');
return;
}
link.classList.remove('visible');
}
document.getElementById('input').addEventListener('input', showLink);.link {
opacity: 0;
}
.visible {
opacity: 1;
}<input id="input" type="text" />
<a class="link" href=""></a>answered Nov 12 '18 at 19:06
Sebix468Sebix468
91
Small example
const SHOWS = {
'game of thrones': 'Game_of_Thrones',
'modern family': 'Modern_Family'
};
function showLink(e) {
const val = e.target.value.toLowerCase();
const link = document.querySelector('.link');
if (SHOWS.hasOwnProperty(val)) {
const generatedLink = `https://en.wikipedia.org/wiki/${SHOWS[val]}`;
link.setAttribute('href', generatedLink);
link.innerText = generatedLink;
link.classList.add('visible');
return;
}
link.classList.remove('visible');
}
document.getElementById('input').addEventListener('input', showLink);.link {
opacity: 0;
}
.visible {
opacity: 1;
}<input id="input" type="text" />
<a class="link" href=""></a>const SHOWS = {
'game of thrones': 'Game_of_Thrones',
'modern family': 'Modern_Family'
};
function showLink(e) {
const val = e.target.value.toLowerCase();
const link = document.querySelector('.link');
if (SHOWS.hasOwnProperty(val)) {
const generatedLink = `https://en.wikipedia.org/wiki/${SHOWS[val]}`;
link.setAttribute('href', generatedLink);
link.innerText = generatedLink;
link.classList.add('visible');
return;
}
link.classList.remove('visible');
}
document.getElementById('input').addEventListener('input', showLink);.link {
opacity: 0;
}
.visible {
opacity: 1;
}<input id="input" type="text" />
<a class="link" href=""></a>const SHOWS = {
'game of thrones': 'Game_of_Thrones',
'modern family': 'Modern_Family'
};
function showLink(e) {
const val = e.target.value.toLowerCase();
const link = document.querySelector('.link');
if (SHOWS.hasOwnProperty(val)) {
const generatedLink = `https://en.wikipedia.org/wiki/${SHOWS[val]}`;
link.setAttribute('href', generatedLink);
link.innerText = generatedLink;
link.classList.add('visible');
return;
}
link.classList.remove('visible');
}
document.getElementById('input').addEventListener('input', showLink);.link {
opacity: 0;
}
.visible {
opacity: 1;
}<input id="input" type="text" />
<a class="link" href=""></a>answered Nov 12 '18 at 19:06
Sebix468Sebix468
91
answered Nov 12 '18 at 19:06
Sebix468Sebix468
91
answered Nov 12 '18 at 19:06
Sebix468Sebix468
91
answered Nov 12 '18 at 19:06
Sebix468Sebix468
91
91
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- 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.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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%2fstackoverflow.com%2fquestions%2f53268056%2freplacing-certain-words-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
Have your attempted anything?
– Heretic Monkey
Nov 12 '18 at 18:37