有一个对象数据结构如下:

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);