替换链接的一部分

Question

我有以下链接：

http://example.com/item/[{catalogueId:[0-9]}/key/[{translationId:[a-z]}]]/

在一个对象中，我有需要放入此链接的值：

args: {catalogueId: 12, translationId: "en"}

现在我要链接来看一下：

http://example.com/item/12/key/en/

但是当对象看起来像这样时：

args: {catalogueId: 12}

链接需要看起来像这样：

http://example.com/item/12/key/

如果对象为空，则12，key也应排除在链接之外。

支架决定将在链接中显示的内容。仅当对象中存在catalogueId时，catalogueId的括号内的每个括号都会显示。

我已经完成了通过此功能替换卷曲括号之间的参数：

for(var key in this.args) {
    var regex = new RegExp('{' + key + '\b[^}]*}', 'g');
    this.pattern = this.pattern.replace(regex, this.args[key]);
}

但是我不知道如何完成括号的部分

Answer 1

根据您的最新要求，我已经更新了解决方案。它不是很漂亮，但它可以工作，我认为当您只能卸下数组括号并切割字符串的情况下，这可能会过大。

检查说明的评论。

const url = 'http://example.com/item/[{catalogueId:[0-9]}/key/[{translationId:[a-z]}]]/'
const REGEX = {
  type: /[([0-9-a-z]+)]/g,      // [type]
  brackets: /[|]/,              // [|]
  keyType: /{(w+):([^}]+)}/, // {key:[type]}
  placeholder: /{[^}]+}/g      // the entire {placeholder}
}
function test(url, params) {
  // split the url into it's compontent parts
  const parts = url.replace(REGEX.type, '($1)')
    .split(REGEX.brackets)
    .filter(str => str !== '')
  
  const ret = []
  
  for (let ii = 0; ii < parts.length; ii++) {
    // find the key and type
    const matches = parts[ii].match(REGEX.keyType)
    if (matches == null) {
      // no placeholders in this section, just add it to the return
      ret[ii] = parts[ii]
    }
    else {
      const [match, key, type] = matches
      if (typeof params[key] !== 'undefined') {
        // replace the placeholder with the provided value
        ret[ii] = parts[ii].replace(REGEX.placeholder, () => {
          // you could do param type checking here
          return params[key]
        })
      }
      else {
        // this iterations placeholder doesn't match, time to quit
        break
      }
    }
  }
  // if we get through the loop return the url
  return ret.join('')
}
const tests = [
  // it should accept no params
  test(url, {}),
  // it should not include placeholders that are missing
  test(url, {
    catalogueId: 10
  }),
  // it should fill in all placeholders
  test(url, {
    catalogueId: 10,
    translationId: 'test'
  }),
  // it should not skip placeholders
  test(url, {
    translationId: 'test'
  }),
  // it should not error with invalid params
  test(url, {
    invalid: 'param'
  })
]
tests.map(result => console.log(result))

<script src="https://codepen.io/synthet1c/pen/WrQapG.js"></script>

我不得不摆脱阵列括号，因为很难让Regex与它们合作而没有一堆代码。但这将通过删除任何不匹配的占位符来做同样的事情。

const test1 = {
  catalogueId: 12, 
  translationId: "en"
}
const test2 = {catalogueId: 12}
const url = 'http://example.com/item/{catalogueId:[0-9]}/key/{translationId:[a-z]}/'
const reg = /{([^:]+):([[^]]+])}/g
const replace = url => components => {
  // replace all the placeholders in the url
  const replaced = url.replace(reg, (_, key, type) => {
    return components[key]
  })
  // clean off any missing values
  const cutIndex = replaced.indexOf('undefined')
  
  return cutIndex < 0
    ? replaced 
    : replaced.substr(0, cutIndex)
}
console.log(
  replace(url)(test1) // 'http://example.com/item/12/key/en/'
)
console.log(
  replace(url)(test2) // 'http://example.com/item/12/key/'
)

<script src="http://codepen.io/synthet1c/pen/WrQapG.js"></script>