Замена определенных слов ссылками?

Question

Скажем, я определяю список констант следующим образом:

const SHOWS = {
     'Game of Thrones': 'Game_of_Thrones',
     'Modern Family': 'Modern_Family'
};

Я хочу создать функцию, которая, когда пользователь вводит строку, распознает, является ли ввод «Игрой престолов» или «Современным семейством», а затем заменяет ее ссылкой на свою страницу википедии ( https://en.wikipedia.org/wiki/Modern_Family / https://en.wikipedia.org/wiki/Game_of_Thrones). Хотя я немного застрял в том, как это сделать. Кто-нибудь может мне помочь?

Answer 1

Маленький пример

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>

Answer 2

Попробуйте - вам понадобится новый div с идентификатором 'links', и вы захотите вызвать checkInput со строкой:

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 3

Использование 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 4

Используйте эту функцию.Если он найдет его в SHOWS, он выведет ссылку, в противном случае он просто выплюнет, что является входным значением (без ссылки на википедию).

function findFragment(input) {
  var wikiFragment = SHOWS[input];
  if (wikiFragment) {
    return '<a href="https://en.wikipedia.org/wiki/' + wikiFragment + '">' + input + '</a>';
  } else {
    return input;
  }
}

Answer 5

Если вам нужно простое решение HTML Data Taglist может быть для вас.

Более простые решения не известны мне лично.Если вам нужно больше индивидуальности, вам нужно внедрить собственную оболочку или поиск готового виджета где-нибудь в сети