텍스트의 @handler 및 해시태그를 클릭 가능한 링크로 전송 - JavaScript

이 기사에서는 해시태그 또는 @ 핸들러와 같은 특수 문자로 시작하는 텍스트 내의 단어를 전송하는 방법을 살펴보고 이 JavaScript 방법을 사용할 수 있습니다.



먼저 Dom 요소 또는 단일 문자열 텍스트에서 트윗 텍스트 변수를 선언합니다.

let tweet = 'Hello World @twitter #GoodDay'; /* Or document.getElementById('tweetDiv') */

그런 다음 이 텍스트를 배열로 바꿉니다.

let tweetArr = tweet.split(" ")

이제 이 배열을 반복하여 일치시키고 '@' 또는 '#'으로 시작하는 각 문자열에 대한 링크를 첨부합니다.

for(let i = 0; i < tweetArr.length; i++){
    let SelectedTweet = tweetArr[i];
    if(SelectedTweet.startsWith('@')){
      tweetArr[i] = '<a href="https://twitter.com/'+SelectedTweet+'">'+SelectedTweet+'</a>'
    } else if(SelectedTweet.startsWith('#')){
      tweetArr[i] = '<a href="https://twitter.com/search?q=%23'+SelectedTweet+'">'+SelectedTweet+'</a>'
    }
}

그런 다음 Array를 Text로 변환한 후 업데이트된 텍스트를 Dom 요소에 삽입합니다.

tweet = tweetArr.join(" ")
console.log(tweet);
/* Or document.getElementById('tweetDiv').innerHTML = tweet */

그리고 @ 또는 Hash로 시작하는 텍스트를 Twitter 스타일 링크로 전송하는 방법은 이 간단한 튜토리얼이 이러한 작업이 어떻게 수행되는지 더 잘 이해하는 데 도움이 되기를 바랍니다.