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。
获取可能包含网址的任何元素，例如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>

Js - 用于在正文中查找网址的正则表达式无法正常工作

1 个答案:

逻辑：