많은 코드를 작성하기 시작하면 분명히 잘못하고 있는 것입니다.

몇 번에 걸쳐 매우 복잡하거나 혼란스럽고 엄청난 양의 코드로 이전에 해결하려고 했던 문제를 극소수의 코드로 해결한 순간이 있었습니다.

Once you start writing a lot of code you're surely doing it wrong

다음은 텍스트에서 발견된 유효한 HTTP URL의 발생을 기반으로 텍스트를 문자열 배열로 변환하려는 최근의 예입니다.
저는 Twitter에 있는 기능을 구현하려고 했습니다. 이 기능은 매우 유용하고 앱에서 보안 리디렉션을 구현하려는 경우 도움이 될 수 있는 게시물에서 찾은 URL을 단축하고 강조 표시합니다.

내 첫 번째 시도:

// Copied from https://stackoverflow.com/a/63022807/10365156
const linkReg = /(https?\:\/\/)?([\w\d-]+\.)*[\w-]+[\.\:]\w+([\/\?\=\&\#]?[\w-]+)*\/?/gm

const text =
  "Look at what he https://twitter.com/signalapp/status/1346258308496150528 vool     https://twitter.com/asemota/status/1346396079466622980"

 const links = post.title.match(linkReg) || []
  const texts = links.reduce((all, cur) => {
    if (all.length) {
      return all.map((v) => {
        let strs = []
        const all = v.split(cur)
        for (let [index, value] of all.entries()) {
          if (all.length - 1 === index) {
            strs.push(value)
          } else {
            strs.push(value, cur)
          }
        }
        return all
      }).flat()
    }
    return post
  }, [])

이 시점에서 나는 이미 혼란스럽고 정말 피곤했기 때문에 머리를 비우기 위해 잠시 그대로 두어야 했습니다.

두 번째 시도는 다음과 같습니다.

const ph = "[z&&&&z]" // placeholder
let t = text.replace(linkReg, (v) => `${ph}${v}${ph}`)

console.log(t.split(ph))
// [
//   "Look at what he ",
//   "https://twitter.com/signalapp/status/1346258308496150528",
//   " vool     ",
//   "https://twitter.com/asemota/status/1346396079466622980",
//   "",
// ]

이 시점에서 나는 이미 필요한 것을 달성했지만 MDN Specifying a string as a parameter을 통과하면 $& 패턴이 생각나서 코드를 한 번 더 리팩토링하여 이것을 얻었습니다.

세 번째 시도:

const tokens = text.replace(linkReg, `${ph}$&${ph}`).split(ph)
console.log(tokens)
// [
//   "Look at what he ",
//   "https://twitter.com/signalapp/status/1346258308496150528",
//   " vool     ",
//   "https://twitter.com/asemota/status/1346396079466622980",
//   "",
// ]

이것은 여전히 ​​두 번째 시도와 동일한 결과를 제공하지만 코드가 적고 전반적으로 훨씬 읽기 쉽고 간단합니다.