有一个对象数据结构如下:
obj = {
content: '准备将#网址导航项目#由静态网页项目改装为#React项目#,减少重复代码。',
links: ['https://github.com/WebStackPage/WebStackPage.github.io', 'http: //www.baidu.com'],
}
现在需要使用原生JS完成字符串替换工作:找到content
中使用#
号标识符包裹的字符串,将其改成使用a标签
包裹,a标签
的href
依次使用links
中的数据项。
替换后的结果应如下:
准备将<a href="https://github.com/WebStackPage/WebStackPage.github.io">网址导航项目</a>由静态网页项目改装为<a href="http://baidu.com">React项目</a>,减少重复代码。
实现
// 先将字符串拆解
const textArr = a.content.split('#');
// 最后的结果
let result = '';
// 标志位:用于判断当前应该添加开标签还是闭标签
let flag = 0;
// 如果第一个字符就是#号,那么从第一个字符开始添加开标签
if (a.content[0] === '#') {
result += '<a href="' + a.links[0] + '">';
flag = ~flag;
}
textArr.forEach((text, index) => {
if (flag) {
// 如果已经添加过开标签,则现在应该添加标签
result += text + '</a>';
}
else if (index !== textArr.length - 1) {
// 如果前一个添加的标签是闭标签,并且当前不是数组的最后一个数据,则添加开标签
result += text + '<a href="' + a.links[index / 2] + '">';
}
else {
// 最后一个数据项,前一个添加的是闭标签,则直接连接文本
result += text;
}
// 每次连接文本都更改一下标志位
flag = ~flag;
})
console.log(result);