JavaScript(JS) 中可以用正则表达式处理html中标签字符串,来提取替换字符串图片或链接的url地址,本文主要介绍使用正则表达式提取替换img(src)或a(href)标签的url的方法,以及相关的示例代码。

1、JavaScript(JS)正则表达式

参考文档JavaScript(JS) 正则表达式 和 RegExp 对象

2、JavaScript(JS) 使用正则表达式提取替换字符串

参考文档:JavaScript(JS) 正则表达式分组匹配提取替换字符串(回调函数)

3、stringObject.replace(regexp/substr,replacement)

1)regexp/substr参数

子字符串或要替换的模式的 RegExp 对象

2)replacement参数

一个字符串值。替换的文本或生成替换文本的函数。

replace() 方法第二个参数中特殊字符:

约定字符串说明
$1、$2、...、$99与正则表达式中的第 1~99 个子表达式相匹配的文本
$&(美元符号+连字符)与正则表达式相匹配的子字符串
$’(美元符号+切换技能键)位于匹配子字符串左侧的文本
$'(美元符号+单引号)位于匹配字符串右侧的文本
$$表示 $ 字符串

3)flags参数

var pattern = /pattern/flags;中flags可以是gim 、suyg指定全局匹配,i不区分大小写、m多行匹配、s启用“dotall”模式,允许点.匹配换行符\nu是启用完整的 Unicode 支持和y是 "Sticky"模式:允许在源字符串中的给定位置执行搜索。

4、替换html字符串中的url

使用正则表达式通过分组提取,回调函数进行替换,代码如下,

function replaceCallback(m,g1){
   console.log("-----begin-----");
   console.log("m = "+m);
   console.log("g1 = "+g1);
   //console.log("g2 = "+g2);
   console.log("-----end-----");
   return g1+"&p=1";
  }
var content = `p><strong>1、JDK11安装</strong></p><p>1)
<span class=\"text-info\">下载JDK11</span></p><p
>Oracle JDK11: <a href=\"https://www.example.com/technetwork/java/javase/downloads/jdk11-downloads-5066655.html\" rel=\"nofollow\">https://www.oracle.com/technetwork/java/javase/downloads/jdk11-downloads-5066655.html</a></p><p>OpenJDK11: 
<a href=\"https://www.example.com/11/\" rel=\"nofollow\">http://jdk.java.net/11/</a></p><p>在上面两个地址下载需要的版本。
</p><p>本文主要是64位win10上安装,文件下载地址:<a href=\"https://download.java.net/openjdk/jdk11/ri/openjdk-11+28_windows-x64_bin.zip\" rel=\"nofollow\">https://download.java.net/openjdk/jdk11/ri/openjdk-11+28_windows-x64_bin.zip</a></p><p>2)
<span class=\"text-info\">解压下载文件</span></p><p>将下载好的.zip文件解压到指定的安装目录,例如,安装到C:\\Program Files\\Java下,在Java文件夹下新建jdk11文件夹,将文件解压到jdk11文件夹下。
</p><p><span class=\"text-warning\">注意:zip文件解压后,JDK中bin文件夹应该在jdk11文件夹下。</span></p>
<p>如果下载的是exe文件,就选择安装目录为新建好的那个JDK11文件夹下。</p><p><strong>2、配置环境变量</strong></p>
p>1)<span class=\"text-info\">配置JAVA_HOME</span></p>
<p>按Windows键+R键,出现运行窗口,在打开文件框中输入sysdm.cpl,点击确定,出现\"系统信息\"窗口。</p><p>在系统信息窗口依次点击,</p>
<p><span class=\"text-primary\">系统信息窗口 =》高级 =》环境变量-》系统环境变量</span> 
, 注意:如果用户环境变量中有对应的环境变量设置,就在用户环境变量中添加。否则会优先读取用户环境,有可能找不到设置的环境变量。如果没有,在系统环境变量或用户环境哪一个都可以,系统环境变量是对所有用户生效的。</p>
<p><span class=\"text-primary\">点击环境变量-&gt;新建-&gt;变量名JAVA_HOME,变量值JDK11的安装目录如C:\\Program Files\\Java\\jdk11
</span></p>
<p><span class=\"text-primary\"><img alt=\"JAVA_HOME\" src=\"http://file.example.xyz/source/download?id=5bd1926bdc72d91ff8d53a12\"><br></span></p><p>2)<span class=\"text-info\">配置Path环境变量</span></p>
<p>编辑Path变量</p><p>把<br><span class=\"text-warning\">%JAVA_HOME%\\bin;<br></span>这个变量插入最前面,注意要有分号和后面的变量间隔开。
</p><p>注意:如果是win10系统,点击编辑后,要点击新建,值为<span class=\"text-warning\">%JAVA_HOME%\\bin</span>,win10系统中不用自己加冒包。</p><p></p><p></p><p><img alt=\"httpfileaionlifexyzsourcedownloadid5bd1bcd1dc72d91ff8d53a14\" src=\"http://file.example.xyz/source/download?id=5bd1bcd1dc72d91ff8d53a14\"></p><p></p>
<p>效果如下图,</p><p><img alt=\"Path\" src=\"http://file.example.xyz/source/download?id=5bd19298dc72d91ff8d53a13\" ><br></p>
<p>3)<span class=\"text-info\">验证是否安装成功</span></p>
<p><span class=\"text-primary\">按windows键+R键</span>,输入cmd,在打开的cmd窗口中输入<span class=\"text-info\">java -version</span>,安装成功提示如下:</p>
<pre class=\"prettyprint linenums\">Microsoft Windows [版本 10.0.17134.254]<br>(c) 2018 Microsoft Corporation。保留所有权利。<br>C:\\Users\\Administrator&gt;java -version<br>java version \"11.0.1\" 2018-10-16 LTS<br>Java(TM) SE Runtime Environment 18.9 (build 11.0.1+13-LTS)<br>Java HotSpot(TM) 64-Bit Server VM 18.9 (build 11.0.1+13-LTS, mixed mode)</pre>`;
console.log(content.replace(/<img\s*alt=".*?"\s*src="(.*?)"\s*?>/gms, replaceCallback));
console.log(content.replace(/<a\s*href="(.*?)"\s*rel="nofollow"\s*?>/gms, replaceCallback));

推荐文档