Замена всех использований @ [word] для ссылки на твиттер-аккаунт в String

Question

Я пытаюсь заменить все варианты использования @ [Insert_handle_here] ссылкой на соответствующую учетную запись Twitter.

Это мой текущий код.

function replaceAts(){
    for (var i=0; i<list.length;i++){
        list[i].text=list[i].text.replace(/@(\w+)/g, '<a href="https://twitter.com/$1" target="_blank">%$1</a>')
    }
}

Я не совсем уверен, как это работает, так как я в значительной степени напрямую справился с другим постом переполнения стека, но его отображение действительно странно на реальной веб-странице.

Например, текст из учетной записи моих друзей

If you want these foams Ima give you the chrome @WillThaRapper

Отображается как If you want these foams Ima give you the chrome <a href="https://twitter.com/WillThaRapper" target="_blank">%WillThaRapper</a>

Что не идеально.

Любой совет?

Answer 1

Не совсем уверен насчет кода внутри функции replace, но я не уверен, как вы вообще получили результат, так как функция не принимает аргументов и ничего не возвращает?

Попробуйте сделать это:

function replaceAts(tweet) {
    var newTweet = tweet.replace('@word', '<a href="https://twitter.com/$1" target="_blank">%$1</a>')
}
return newTweet;
}

var test = 'If you want these foams Ima give you the chrome @WillThaRapper'

console.log(replaceAts(test)); //prints 'If you want these foams Ima give you the chrome <a href="https://twitter.com/$1" target="_blank">%$1</a>'

Answer 2

Вы можете использовать либо положительное выражение взгляда RegExp, либо простую функцию, возвращающую желаемый результат - который на самом деле более настраиваемый.

var list = [
  'If you want these foams Ima give you the chrome @WillThaRapper.',
  'Whatever the mind of man can conceive and believe, it can achieve @NapoleonHill.',
  'Here is @my_id and please give me @yours.'
];

function replaceAts() {
  var replacer = function(match) {
    var id = match.substr(1);

    return `<a href="https://twitter.com/${id}" target="_blank">${id}</a>`;
  };

  for (var i = 0; i < list.length; i++) {
    list[i] = list[i].replace(/@\w+/g, replacer);
  }
}

replaceAts();

console.log(list);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

PS Дайте мне знать, если вам нужна версия решения ES6, поскольку мы можем уменьшить их размер, значительно - или хотя бы улучшить читаемость.

Answer 3

Действительно нужна дополнительная информация, но это то, что вы ищете?

// List of twitter tags
let list = ["@someone", "@anotherperson", "@thisperson"];

const displayAccounts = (arr) => {
  let target = document.querySelector('ul');
  arr.forEach(twit => {
    let html = `<a href="https://twitter.com/${twit}" target="_blank">${twit}</a>`;
    let li = document.createElement('li');
    li.innerHTML = html;
    target.appendChild(li);
  });
};

document.addEventListener('DOMContentLoaded', () => {
  displayAccounts(list);
});

<div>
  <ul>
  </ul>
</div>