Question

我的文字如下：

<a href="http://example.com/test this now">Stuff</a>

More stuff

<a href="http://example.com/more?stuff goes here">more</a>

我想用一个只会URL编码URL部分的函数替换href中的内容。

我该怎么做？

更新以下是我尝试过的内容：

postdata.comment.content = postdata.comment.content.replace(/href=\"(.+?)\"/g, function(match, p1) {
    return encodeURI(p1);
});

没有做我希望的事。

预期结果是：

<a href="http%3A%2F%2Fexample.com%2Ftest%20this%20now">Stuff</a>

More stuff

<a href="http%3A%2F%2Fexample.com%2Fmore%3Fstuff%20goes%20here">more</a>

Answer 1

对于编码，您可以使用encodeURIComponent：

＆＃13;

var links = document.querySelectorAll('a');
for(var i=0; i<links.length; ++i)
  links[i].href = encodeURIComponent(links[i].href);

＆＃13;

<a href="http://example.com/test this now">Stuff</a>
More stuff
<a href="http://example.com/more?stuff goes here">more</a>

＆＃13;

如果您只有HTML字符串而不是DOM元素，请使用don't use regular expressions。改为使用DOM解析器解析字符串。

＆＃13;

var codeString = '<a href="http://example.com/test this now">Stuff</a>\nMore stuff\n<a href="http://example.com/more?stuff goes here">more</a>';
var doc = new DOMParser().parseFromString(codeString, "text/html");
var links = doc.querySelectorAll('a');
for(var i=0; i<links.length; ++i)
  links[i].href = encodeURIComponent(links[i].href);
document.querySelector('code').textContent = doc.body.innerHTML;

＆＃13;

<pre><code></code></pre>

＆＃13;

请注意，如果您完全对URL进行编码，则会将其视为相对URL。

Answer 2

正则表达式匹配完整属性href="...."，但是，替换只能通过编码的URL完成，并使用encodeURIComponent()对完整的URL进行编码。

var string = '<a href="http://example.com/test this now">Stuff</a>';

string = string.replace(/href="(.*?)"/, function(m, $1) {
    return 'href="' + encodeURIComponent($1) + '"';
    //      ^^^^^^                     ^
});

var str = `<a href="http://example.com/test this now">Stuff</a>

More stuff

<a href="http://example.com/more?stuff goes here">more</a>`;

str = str.replace(/href="(.*?)"/g, (m, $1) => 'href="' + encodeURIComponent($1) + '"');

console.log(str);
document.body.textContent = str;

Answer 3

这是在哪里运行？如果你有一个DOM，那么你最好在document.links或document.querySelectorAll（“a”）上使用DOM循环而不是HTML上的正则表达式。此外，您可能不想编码所有内容，只需编码搜索部分

var allLinks = document.querySelectorAll("a");
for (var i=0;i<allLinks.length;i++) {
   var search = allLinks[i].search;
   if (search) {
     allLinks[i].search="?"+search.substring(1).replace(/stuff/,encodeURIComponent("something"));
   }
}

如果您确实想要编码href，那么

for (var i=0;i<allLinks.length;i++) {
   var href = allLinks[i].href;
   if (href) {
     allLinks[i].href=href.replace(/stuff/,encodeURIComponent("something"));
   }
}

Answer 4

免责声明：不要使用正则表达式解析HTML
（在这里列出太多理由..）

但是，如果你坚持，这可能会奏效。

查找/(<[\w:]+(?:[^>"']|"[^"]*"|'[^']*')*?\shref\s*=\s*)(?:(['"])([\S\s]*?)\2)((?:"[\S\s]*?"|'[\S\s]*?'|[^>]*?)+>)/

替换$1$2 + someEncoding（$ 3）+ $2$4

扩展

 (                             # (1 start)
      < [\w:]+ 
      (?: [^>"'] | " [^"]* " | ' [^']* ' )*?
      \s 
      href \s* = \s* 
 )                             # (1 end)
 (?:
      ( ['"] )                      # (2)
      (                             # (3 start)
           [\S\s]*? 
      )                             # (3 end)
      \2 
 )
 (                             # (4 start)
      (?: " [\S\s]*? " | ' [\S\s]*? ' | [^>]*? )+
      >
 )                             # (4 end)

Answer 5

您的预期字符串<a data-track-dynamic-attrs="["Page","Stakeholder"]"></a>对应此操作"http%3A%2F%2Fexample.com%2Ftest%20this%20now"，但不对应encodeURIComponent("http://example.com/test this now")函数：

encodeURI

如何用JavaScript正则表达式替换href中的所有内容？

5 个答案: