Как отформатировать подстроку для ссылки в твиттере, используя javascript?

Question

например, у меня есть строка, подобная этой:

Hi @david I want to eat chicken. #kfc #yummy

Я хочу отформатировать ее следующим образом:

<p> Hi <a href="/u/david">@david</a> I want to eat chicken. <a href="/tag/kfc">#kfc</a> <a href="/tag/yummy">#yummy</a></p>

как преобразовать строку в этот html -форматный формат twitter?

с использованием скрипта java?

Answer 1

Вы можете преобразовать строку в массив слов, а затем проверить, содержит ли слово @ или #, если это так, создать элемент привязки, в противном случае текстовый узел и добавить к p. Например:

let p = document.createElement("p");
let tweet = "Hi @david I want to eat chicken. #kfc #yummy";
for (let word of tweet.split(" ")) {
  if (word.startsWith("@")) {
    let a = document.createElement("a");
    a.textContent = word;
    a.href = `/u/${word.substr(1)}`;
    p.append(a);
  } else if (word.startsWith("#")) {
    let a = document.createElement("a");
    a.textContent = word;
    a.href = `/tag/${word.substr(1)}`;
    p.append(a);
  } else {
    p.append(document.createTextNode(word));
  }
  p.append(" ");
}
container.append(p);

<div id="container"></div>

Answer 2

('Hi @david I want to eat chicken. #kfc #yummy')
.replace(/@([a-z]+)/g, '<a href="/u/$1">@$1</a>')
.replace(/#([a-z]+)/g, '<a href="/tag/$1">#$1</a>');

Рабочий образец: https://jsfiddle.net/rgwLhesc/