Оживление простых ссылок в тексте тега p.

Question

Оживление простых ссылок в тексте тега p.

Алишер Яхшиликов Ученик (131), на голосовании 7 месяцев назад

Допустим есть текст в теге p:

<p> За свою карьеру я пропустил более 9000 бросков, проиграл почти 300 игр. 26 раз мне доверяли сделать финальный победный бросок, https:// www.forbes.ru/ и я промахивался. Я терпел поражения снова, и снова, https:// www.forbes.ru/ и снова. И именно поэтому я добился успеха.</p>.

При публикации поста, ссылки "https:// www.forbes.ru/" становятся просто текстом, тобиш не активными, как если бы мы завернули их в тег:
<a href="https:// www. forbes.ru/"> https:// www.forbes.ru/</a>.
Необходимо чтобы ссылки становились активными без участие человека, который будет прописывать тег "А".
Как это реализовать...?

Answer 1

Написать скрипт, использующий регулярные выражения

Answer 2

Вот. Написал код который заменяет все ссылки на рабочие в теге <p>. в querySelectorAll можете добавить еще теги по необходимости.

 const texts = document.querySelectorAll('p') 
const urlRegex = /((http|https):\/\/\S+\.(png|jpg|gif|svg|jpeg|bmp|tiff|jfif|webp)|www\.\S+\.(png|jpg|gif|svg|jpeg|bmp|tiff|jfif|webp)|((http|https):\/\/)?[a-zA-Z0-9]+\.\w{2,}(\S)?)\b/g 
 
texts.forEach(text => { 
    const newTextWithLink = text.textContent.split(' ').map(e => { 
        if (urlRegex.test(e)) { 
            const linkName = e.split('.')[1] 
            return `${linkName}` 
        } 
            return e 
        }) 
        text.innerHTML = newTextWithLink.join(' ') 
})