javascript - 使用 javascript 优雅地修改现有链接的参数

Question

我想使用 javascript 查找此链接中包含大量参数的部分内容:

<a class="" data-method="post" href="/daily_drills?commonality%5B%5D=category&amp;commonality%5B%5D=2&amp;daily_drill%5Bgroup_id%5D=2&amp;drill_ids%5B%5D=7&amp;drill_ids%5B%5D=4&amp;drill_ids%5B%5D=3&amp;group=2" id="done-button" rel="nofollow">Done</a>

并在参数 drill_ids 中添加/删除数字

在上面的例子中，drill_ids参数包含["7", "4", "3"]:

drill_ids%5B%5D=7&drill_ids%5B%5D=4&drill_ids%5B%5D=3

我有一个方法，当用户点击页面上的数字时触发，如果他们点击“7”，我想从 drill_ids 参数中删除“7”。如果他们单击参数中不存在的数字，我想将其附加到 drill_ids 参数。

• 因为我可以将此链接渲染为部分链接，所以我考虑使用附加的 drill_ids 参数重新渲染整个链接，但是在较弱的连接上不会有即时响应时间。

• 我 - 可以 - 只是采用正则表达式样式并添加/删除 drill_ids%5B%5D=7&(对于数字 7)，但似乎有更简洁的方法来执行此操作。

我应该如何处理这个问题有什么建议吗？

Answer 1

我最终做了一个简单的 javascript 匹配，因为我想不出一个聪明干净的解决方案:

// I build up a string that I want to replace the old string with

// create a list of the ids that I wanted to append
listOfIds = ""
arrayOfIds.forEach (id) ->
  listOfIds = listOfIds+id

// grab the old link in it's entirety
oldLink = $("#done-button").attr("href")
console.log(oldLink)

// grab the string from the old link I don't want
match = oldLink.match(/(?:group_id%5D=2)(.*)(?=&group=)/)[1]

// replace the old string with the new string
newLink = oldLink.replace(match, listOfIds)

// changed the href attribute on the link
$("#done-button").attr('href', newLink)