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

如果您想要一个简单的解决方案，HTML Data Taglist可能是您的理想选择。

更简单的解决方案我个人并不知道。如果您需要更个性化的产品，则必须实现自己的包装器或在网络中的某个位置搜索开箱即用的小部件

Answer 2

使用 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

使用此功能。如果它在const fn2 = function(x) {/* MAKE X AVAILABLE ONLY IN THIS FUNCTION */}; const fn3 = function() {/* HERE X CANNOT BE CALLED */}; (()=>{ const x = 10; //your logic fn2(x); fn3(); })()中找到它，则它将输出一个链接，否则它将吐出什么是输入值（没有指向Wikipedia的链接）。

SHOWS

Answer 4

尝试此操作-您将需要一个ID为'links'的新div，并且要使用以下字符串调用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 5

小例子

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>

用链接替换某些单词？

5 个答案: