请问老师正则应该怎么写？

Question

<div id=list1 > 哦空空
韩国的
https://www.baidu.com </div>

<div id=list2 > 哦fg空
u加上
https://www.baidu.com </div>

<div id=list3 > 改革认同
几节课
https://www.baidu.com </div>

<div id=list4 > 开机空
海港城
https://www.baidu.com </div>

上面是我的内容。我要用下面的正则给url加上链接。
现在我还需要在链接后用一个隐藏文本框显示对应div的全部内容。
难在有多个id。
请问老师正则应该怎么写？

<script type="text/javascript">

var txt = document.getElementById('list').innerHTML;

var regexp = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|\&|-)+)/g;

txt1=txt.replace(regexp,function($url){
    
return "<a href='" + $url + "' target='_blank'>" + $url + "</a><input type=hidden value='" + txt + "'></input>";});;

document.getElementById('list').innerHTML=txt1
</script>

Answer 1

`<div id=list1 > 哦空空
韩国的
https://www.baidu.com </div>

<div id=list2 > 哦fg空
u加上
https://www.baidu.com </div>

<div id=list3 > 改革认同
几节课
https://www.baidu.com </div>

<div id=list4 > 开机空
海港城
https://www.baidu.com </div>`.replace(/(<\s*?div[^>]*?>)((.|\s)*?)(https?:\/\/(\w|=|\?|\.|\/|\&|-)+)/g, function(str, $1, $2, $3, $4, $5, index, content){
    console.log(1, str)
    console.log(2, $1)
    console.log(3, $2)
    console.log(4, $3)
    console.log(5, $4)
    console.log(6, $5)
    console.log(7, index)
    console.log(8, content)
    return $1 + $2 + `<a href='${$4}' target='_blank'>${$4}</a><input type=hidden value='${$2 + $4}'></input>"`
})

Answer 2

用正则太麻烦了，如果是使用的 React/Vue 的话，可以在接收数据然后循环输出组件的时候去拼接处理。
如果已经是实际的 DOM 元素了，只是去操作一里面的元素属性和内容，建议使用 DOM 的操作API 或者 jQuery 来操作 href 属性和内部添加 <input type='hidden'/>。