Js - 用于在正文中查找 url 的正则表达式不起作用

Question

我正在尝试实现我发现here 的正则表达式。我想找到任何http、https 或网络a tags，然后将 target="blank" 添加到它们。因此，代码如下所示：

const urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;

        return this.node.body.replace(urlRegex, function(url) {
            return `${url}" target="blank">`;
        })

如果我收到这样的文字：

<p>
  <a href='www.norden.org'>Nordens</a>
</p>
<p>
  <figure>
    <img src='http://tornado-node.net/wp-content/uploads/2017/08/Ove-Hansen.jpg' alt=' Styreleder Ove Hansen. Foto: Arne Walderhaug' />   

    <figcaption>Ove Hansen, styreleder i Norden</figcaption>
  </figure>
</p>
<p>
  <a href='http://norden.org/documents.html'>norden.org</a>
</p>

这是上述函数的结果：

<p>
  <a href='<a href=\"www.norden.org'>Nordens</a>
</p>
<p>
   <figure>
     <img\" target=\"blank\"> src='<a href=\"http://tornado-node.net/wp-content/uploads/2017/08/Ove-Hansen.jpg'\" target=\"blank\"> alt=' Styreleder Leif-Ove Hansen. Foto: Arne Walderhaug' />
     <figcaption>Ove Hansen, styreleder i Norden</figcaption>
    </figure>
</p>
<p>
   <a href='<a href=\"http://norden.org/documents.html'>norden.org</a></p>\" target=\"blank\">"

实现这个的正确方法是什么？

更新

我也在尝试在这样的文本中查找 href：

    let str   = this.node.body;
    const regex = /(href=\')([^\']*)(\')/g;

    if (str.match(regex)) {
      for(let i = 0; i < str.match(regex).length; i++) {
        let url = str.match(regex)[i] + ' target="_blank"';
      }
    }

这给了我一个包含匹配 href 的字符串的数组，但我在其中添加了 target="_blank"，但是我现在如何用我正在检查的文本中替换它？

Answer 1

在处理 HTML 时，尽量避免解析字符串。你可以试试这样：

逻辑：

• 创建一个要处理的虚拟元素。这将是一个内存中的元素，不会被渲染。
• 将 html 字符串设置为其 innerHTML。
• 获取任何可以包含 url 的元素，例如 a 或 img。
• 在此列表上循环并检查必要属性的正则表达式有效性。
• 如果满意，添加属性。

function getUpdatedHTMLString(htmlString){
  var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
  var dummy = document.createElement('div');
  dummy.innerHTML = htmlString;
  
  var list = dummy.querySelectorAll('a, img');
  for(var i = 0; i< list.length; i++) {
    var href = list[i].getAttribute('href');
    var src = list[i].getAttribute('src');
    if (urlRegex.test(src) || urlRegex.test(href)) {
      list[i].setAttribute('target', '_blank');
    }
  }
  
  return dummy.innerHTML;
}

var str = "<p>" +
"<a href='www.norden.org'>Nordens</a>" +
"</p>" +
"<p>" +
"<figure>" +
"<img src='http://tornado-node.net/wp-content/uploads/2017/08/Ove-Hansen.jpg' alt=' Styreleder Ove Hansen. Foto: Arne Walderhaug' />" +
"<figcaption>Ove Hansen, styreleder i Norden</figcaption>" +
"</figure>" +
"</p>" +
"<p>" +
"<a href='http://norden.org/documents.html'>norden.org</a>" +
"</p>";

console.log(getUpdatedHTMLString(str));

<p>
  <a href='www.norden.org'>Nordens</a>
</p>
<p>
  <figure>
    <img src='http://tornado-node.net/wp-content/uploads/2017/08/Ove-Hansen.jpg' alt=' Styreleder Ove Hansen. Foto: Arne Walderhaug' />

    <figcaption>Ove Hansen, styreleder i Norden</figcaption>
  </figure>
</p>
<p>
  <a href='http://norden.org/documents.html'>norden.org</a>
</p>