Заменить несколько частей строки тегом привязки

Question

Я пытаюсь заменить все похожие части строки тегами привязки, подобными этим: convert('lorem ipsum google=https://google.com lorem ipsums lorem facebook=https://facebook.com ipsum lorem'); ожидаемый результат:

lorem ipsum <a href="https://google.com">google</a>
lorem ipsums lorem <a href="https://facebook.com">facebook</a> ipsum lorem

Answer 1

function convert(string){
  console.log(string.replace(/([a-z]*)=((https?|ftp):\/\/(-\.)?([^\s/?\.#-]+\.?)+(\/[^\s]*)?)/ig, "<a href='\$2'>$1</a>"));
}
convert('lorem ipsum google=https://google.com lorem ipsums lorem facebook=https://facebook.com ipsum lorem')

Answer 2

function convert(str) {
  const parts = str.split(" ");
  const formattedParts = parts.map(value => {
    if (value.includes("=")) {
      const [name, url] = value.split("=");
      return `<a href="${url}">${name}</a>`
    }
    return value;
  });

  return asAnchor.join(" ");
}

Эта функция должна читать каждое «слово» в строке, проверять, должно ли оно быть привязкой (вы можете обновить value.includes("=") до более продвинутого регулярного выражения, если вам нужно), а затем вернуть отформатированная строка привязки по мере необходимости.

Поскольку это реакция, я предполагаю, что вы хотите фактически отобразить их как реальные ссылки, а не просто вернуть отформатированную строку, в этом случае этот компонент может делать то, что вам нужно :

const StringWithLinks = ({ value }) => {
  const parts = value.split(" ");

  return (
    <span>
      {parts.map((part, key) => {
        if (!part.includes("=")) return <span key={idx}>{part}</span>;

        const [name, url] = part.split("=");
        return <a href={url} key={idx}>{name}</a>
      })}
    </span>
  )
}

Answer 3

let str = 'lorem ipsum google=https://google.com lorem ipsums lorem facebook=https://facebook.com ipsum lorem';

convert(str);

function convert(str) {
    return str.replace(/([a-z]+)=([a-z:\/\.]+)/g, match => { let split = match.split('='); return `<a href="${split[1]}">${split[0]}</a>` })

}

Функция преобразования сначала будет искать все вхождения name=url в строке (из-за тега 'g').

Затем она будет заменять каждое совпадение тегом привязки, где href - это значение после '=', а текст - это значение после '='.