Replacing certain words with links?

Question

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?

Answer 1

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

Answer 2

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>'

Answer 3

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

Answer 4

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');

Answer 5

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>