JS中replace()方法参数替换变量（可以对变量进行全文替换）

正常使用

JS replace()方法替换变量（可以对变量进行全文替换）我要用 JS 替换一个多行文本的关键字正常，没有变量的时候应该是这样：把 a 替换成 b：

string.replace("a","b");

以上只能替换第一个匹配的，要全文匹配应该用正则表达式：

string.replace(/a/g,"b");

正则加个参数 g ，表示全文匹配。注意，这里的第一个参数就不能加引号了。

但现在，我要替换的不是 a 这个字符了，而是从外面传进来的一个变量：var key;

我可以这么写：

string.replace(key,"b");

这只能替换第一个匹配的，要全文匹配就遇到难题了：

string.replace(/key/g,"b"); 这样写不行！！

这样写是不行的，变量 key 传不到正则里面去。

解决方法

这里就要用 JS 里面正则表达式的另一个使用方法：

string.replace(new RegExp(key,'g'),"b");

这里，利用 JS 的 RegExp 对象，将 g 参数单拿了出来，同时，正则的内容可以用变量来代替了！！！！

new RegExp在《JS高级程序设计 第三版》P105页

第一个参数，可以传入一个正则表达式，进行全局匹配。

比如我的搜索词是"qingdao"，然后返回的搜索结果如下：

2022“国际友人@Qingdao”暨“国际青年对话”活动启动

我需要将文字中的“Qingdao”标红高亮。

var keyword = 'qingdao';
var title = '2022“国际友人@Qingdao”暨“国际青年对话”活动启动';
// 首先获取正则表达式 ig就是匹配的时候 不区分大小写
let pattern = new RegExp(keyword, 'ig');

console.log(pattern)
// 得到/qingdao/gi

// 匹配title中的Qingdao
let matches = pattern.exec(title);

console.log(matches)
// ['Qingdao', index: 10, input: '2022“国际友人@Qingdao”暨“国际青年对话”活动启动', groups: undefined]

// 获取标题中的关键词
let keyInner = matches[0];

// 重新构建正则表达式
let patternKey = new RegExp(keyInner, 'ig');

console.log(patternKey);
// /Qingdao/gi

// 替换匹配到的关键词 为搜索到的词
let ntitle = title.replace(patternKey, `<b >${keyInner}</b>`);

console.log(ntitle);

// document.body.innerHTML = ntitle;

将以上代码放到浏览器的控制台中运行即可，或者：

http://tool.wubin.work/pages/code-run-online/

使用在线运行工具运行。

uniapp中，此种方法需要用rich-text，具体https://uniapp.dcloud.net.cn/component/rich-text.html#rich-text