정규 표현식을 사용하여 사용자가 입력한 URL, 타임 스탬프 및 해시 태그를 분석합니다.🧠

📽
나는 일찍이 모든 대가를 아끼지 않고 정규 표현식akaRegEx를 사용하지 않았다.그것을 어떻게 사용하는지 모르는 것 외에, 나는 코드에서도 그것의 다용도를 보지 못했다.공평하게 말하자면, 나는 정규 표현식이 초보자에게 완전히 적합하지 않다고 생각한다.그럼에도 불구하고, 나는 지금 그것을 사용할 기회를 찾고 있다는 것을 발견했다.사실 정규 표현식은 대량의 개발 시간을 절약할 수 있는 강력한 도구이다.
최근에 나는 유튜브의 일부 내용을 다시 만드는 데 전념했고 간단하지만 멋진 영상 묘사와 평론을 알아차렸다.사용자는 URL, 타임 스탬프, 해시 태그를 입력할 수 있으며 YouTube는 확인 입력과 텍스트를 링크로 변환합니다.URL은 외부 링크가 되고, 타임 스탬프는 현재 비디오를 특정 위치로 검색하는 링크이며, 해시 태그는 관련 내용을 검색하는 검색어가 됩니다.

이 점을 이해할 수 있는 좋은 도구와 사이트가 있다.때때로 구글에서 검색만 하면 regex for <whatever> 좋은 창고가 넘쳐나는 것을 발견할 수 있다.RegExr정말 멋있어요.표현식을 자신의 라이브러리에 저장하는 계정을 만들 수 있습니다.그 밖에 그들은 모든 역할과 그 역할을 분해했고 지역 사회 표현 데이터베이스는 말할 것도 없었다.Regular Expressions Info 거의 모든 정규 표현식과 관련된 사물을 더욱 상세하게 분류했다.
현재, 이 강좌는 사용자가 입력한 것을 포획하고 저장했다고 가정합니다.이것은 우리가 해석하고 있는 원시 텍스트다.여기서 우리는 텍스트를 HTML로 처리할 때 몇 가지 문제를 해결해야 한다.

텍스트 형식 보존 - 간격, 줄 바꿈 등

텍스트를 HTML 요소에 넣기

URL, 타임 스탬프(HH:MM:SS 형식) 및 해시 태그

의 텍스트 분석

필요한 경우 적절한 링크, 대상 및 매개변수로 교체

보상: 동영상을 설정한 시간, 태그 단어에 따라 검색

⚠ 면책 선언 - 모든 코드 예제에는 React 및/또는 JSX 구문이 사용되므로 JavaScript 사용
형식을 저장하는 것은 상당히 쉽다.하나의 옵션은 HTMLpre 태그입니다.pre는 미리 포맷된 약자입니다.🤦‍♂️

<pre>{description}</pre>

다른 옵션은 white-space로 설정된 pre CSS 속성을 사용합니다.우리는 사용해도 무방하다pre-wrap.그렇지 않으면 긴 줄 텍스트가 용기에서 넘쳐납니다.

<div style={{whiteSpace: 'pre-wrap'}}>{description}</div>

지금 대포를 쏴야 돼요.🔫. 우선, 우리는 관련된 정규 표현식을 찾아내고 어느 정도 이해해야 한다.여기에는 http/s URL을 찾기 위한 매우 표준적인 표현식이 있습니다.그것은 기본적으로 찾기http://anything였지만 해낸 것 같다.g 로고 - 모든 일치 항목과 대소문자를 무시하는 i 로고와 일치합니다.또한 첫 번째 캡처 블록에서 OR 연산자를 사용하여 ftp 및 file URL을 일치시킬 수 있습니다.

const reUrl = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi

타임 스탬프 표현식은 그렇게 나쁘지 않다.참고 (?:)? 는 선택적 캡처 그룹을 설정합니다.[0-5]을 처리할 때 HH:MM:SS를 보지 못하기 때문에 최고 분이나 초는 59가 될 수 있다.어쨌든, 이것은 일치01:90:90와MM:SS를 위한 것이다. 이것은 매우 멋있다.이것은 사용자가 사용할 수 있는 시간 링크에 더 많은 유연성을 가질 수 있도록 한다.

const reTime = /\s(?:(?:([01]?\d):)?([0-5]?\d))?:([0-5]?\d)\s/g

자, 함수 자체를 토론합시다.우리는 :SS 원형에서 replace 방법을 이용할 것이다.String.prototype.replace은String을 첫 번째 매개 변수로 하고 함수를 두 번째 매개 변수로 할 수 있습니다.이 리셋 함수는 많은 파라미터를 수신할 수 있지만, 첫 번째 파라미터는 일치하는 텍스트 자체입니다.이것은 우리가 대체 문자열에서 원시 URL/time/hash를 사용할 수 있다는 것을 의미한다.우리의 생각은 일치하는 항목을 적당한 HTML로 바꾸는 것이다.간단하게 보기 위해서 우리는 URL부터 시작할 것이다.이 과정은 통상적으로 RegEx 과정이라고 부른다.알겠어?🧠

function linkify(text) {
    return text.replace(reUrl, url => `<a href="${url}" target="_blank">${url}</a>`)
}

나는 공간을 절약하기 위해 arrow 함수를 사용하고 템플릿 문자열을 되돌려 주었다.이 페이지가 새 창에서 열릴지 확인하려면 대상을 linkify 로 설정합니다.Template strings 이제 알겠지.
처리 시간 스탬프가 좀 고급스러워요.우리는 그것들을 유용하게 하기 위해 보조 함수와 추가 논리가 필요하다.예를 들어 YouTube와 같은 비디오 플레이어가 있다고 가정해 보세요.우리는 _blank 형식으로 타임 스탬프 링크를 표시하기를 원하지만, 검색 매개 변수를 설정할 수 있도록 이 값을 초로 변환해야 하며, 플레이어-HTML 비디오 요소에 보낼 수 있는 값이 HH:MM:SS라는 속성이 있습니다. 이 속성은 동영상의 시간을 가져오거나 설정합니다.초!우리는 또한 우리 사이트의 유저 페이지의 URL 값이 필요하다.

function HHMMSStoSeconds(str) {
  var p = str.split(':')
  var s = 0
  var m = 1

  while (p.length > 0) {
    s += m * parseInt(p.pop(), 10)
    m *= 60
  }

  return s
}

function linkify(text) {
    const playerUrl = 'http://www.youtube.com/watch'
    return text.replace(reTime, time => {
        const seconds = HHMMSStoSeconds(time)
        return `<a href="${playerUrl}?time=${seconds}">{time}</a>`
    })
}

겸사겸사 한마디 하자면, 나는string to seconds 함수를 정말 좋아한다.나는 이미 한동안 currentTime 순환을 사용하지 않았다.🤓
현재, 사용자가 타임 스탬프 링크를 눌렀을 때, 우리는 링크에서 지정한 시간 내에 동영상을 검색하기 위해 React 구성 요소에서 복잡한 논리를 실현할 수 있습니다.

class Player extends React.Component {

    componentDidMount() {
        const params = new URLSearchParams(window.location.search)
        const time = params.get('time')
        if(time) {
            this.video.currentTime = time
        }
    }

    render() {
        return <video ref={el=>this.video = el} src={src} />
    }
}

이것은 보기에 매우 이상할 수도 있다. 왜냐하면 우리는 이미 공유 라이브러리에 익숙해졌기 때문이다. 그러나 그것은 확실히 효과가 있다.이해 URLSearchParams.여기에서 사용while도 관건이다.React는 기본 DOM 노드와 그에 부합되는 모든 내장api에 접근할 수 있는 기능이 있습니다.React Refs과HTML video/audio DOM...도움이 되다.
해시 라벨의 작업 방식은 타임 스탬프와 매우 비슷하다.개발자가 이를 UI에 구현하는 방법을 결정합니다.YouTube에서 해시태그와 관련된 모든 내용을 검색합니다.해시 태그와 일치하는 표현식은 다음과 같습니다.

const reHash = /(?:\s|^)?#[A-Za-z0-9\-\.\_]+(?:\s|$)/g

이 점은 사실상 거의 이해할 수 있다.그러나 우리는 그것을 다음과 같이 분해할 수 있다.

(?: // start of non-capture group
\s  // match space character
|   // logical OR
^   // beginning of string
)   // end non-capture group
?   // match 0 or 1 of preceding
#   // match # character
[]  // enclosed character set
A-Z // capital A through Z
a-z // lowercase a through z
0-9 // digits 0 through 9
\-  // \ is an escape character matches -
+   // requires 1 or more match of preceding token
$   // end of string 

이제 우리는 모든 내용을 하나의 큰 함수에 합칠 수 있다.물론 사람마다 수요가 다르지만 아래의 내용은 유튜브 같을 수도 있다.이번에 나는 물체 하나를 지나갔다.이것은 단지 하나의 방법일 뿐이다.그러나 나의 실현에서 만약 시간이 영상의 지속 시간보다 크다면 타임 스탬프 링크를 만드는 것은 큰 의미가 없다.ref 블록을 검사하고 매개 변수를 리셋 함수로 되돌려줍니다. 마치 우리가 특정한 일치를 무시한 것 같습니다.가치가 있었어

import HHMMSStoSeconds from './above-this'

const reUrl = /(\b(https?):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi
const reTime = /\s(?:(?:([01]?\d):)?([0-5]?\d))?:([0-5]?\d)\s/g
const reHash = /(?:\s|^)?#[A-Za-z0-9\-\.\_]+(?:\s|$)/g
const frontend = 'https://www.youtube.com'

export default function linkify(video) {
  return (
    video.description
      .replace(reUrl, url => `<a href="${url}" target="_blank">${url}</a>`)
      .replace(reTime, time => {
        const secs = HHMMSStoSeconds(time)
        if (secs > video.duration) {
          return time
        } else {
          return `<a href="${frontend}/watch?id=${video.id}&t=${secs}">${time}</a>`
        }
      })
      .replace(
        reHash,
        hash => `<a href="${frontend}/search?term=${hash.replace('#', '').trim()}">${hash}</a>`
      )
  )
}

그래서 만약 네가 정말 이 점을 해냈다면, 너는 틀림없이 뭔가를 배웠을 것이다.나는 내가 하루의 대부분을 들여서야 이 모든 것을 알게 되었고, 나는 어쩔 수 없이 각종 다른 사이트와 검색에서 추출해야 한다고 생각한다.왜 같은 곳에 놓지 않았어요?물론 더 효과적이거나 철저한 정규 표현식이 있을 수도 있다.하지만 이런 것들은 내 용례에 효과가 있는 것 같다.
Library that does all this for you