Замена определенных слов ссылками? - PullRequest
Новая
       11

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

0 голосов
/ 12 ноября 2018

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

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). Хотя я немного застрял в том, как это сделать. Кто-нибудь может мне помочь?

Ответы [ 5 ]

0 голосов
/ 12 ноября 2018

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

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>
0 голосов
/ 12 ноября 2018

Попробуйте - вам понадобится новый 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');
0 голосов
/ 12 ноября 2018

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

0 голосов
/ 12 ноября 2018

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

function findFragment(input) {
  var wikiFragment = SHOWS[input];
  if (wikiFragment) {
    return '<a href="https://en.wikipedia.org/wiki/' + wikiFragment + '">' + input + '</a>';
  } else {
    return input;
  }
}
0 голосов
/ 12 ноября 2018

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

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

...