问答

js利用正则匹配关键字符串处理后的结果再去替换关键字符串的问题

作者:admin 2021-05-05 我要评论

利用正则去处理文章内的相关字符串后,处理后的结果再去替换文章内的字符串,为什么只生效了一处,而另外一处的没有生效,明明两个处理后的div结构都打印出来了...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

js正则问题

利用正则去处理文章内的相关字符串后,处理后的结果再去替换文章内的字符串,为什么只生效了一处,而另外一处的没有生效,明明两个处理后的div结构都打印出来了呀。
真的是百思不得其解。求大佬帮忙看看。
具体代码如下,还请大佬帮忙修正下~js小白鼠一只在线急求~

var photos_reg = /\[photos](.*?)\[\/photos\]/g;
var postContent = document.querySelector('.post-content');
var photos_value = postContent.innerHTML.match(photos_reg);
// console.log(photos_value);
for (var i = 0; i < photos_value.length; i++) {
    photos_value[i] = photos_value[i].split(' ');
    photos_value[i].shift();
    photos_value[i].pop();
    // console.log(photos_value[i]);
    var div = document.createElement('div');
    div.classList = 'photos';
    for (var j = 0; j < photos_value[i].length; j++) {
        photos_value[i][j] = photos_value[i][j].split(",");
        // console.log(photos_value[i][j]);
        var figure = document.createElement('figure');
        figure.classList = 'photos-img';
        figure.innerHTML = `
            <a href="${photos_value[i][j][0]}" target="_blank">
                ![](${photos_value[i][j][0]})
            </a>
            `;
        div.appendChild(figure);
    }
    console.log(div);
    postContent.innerHTML = postContent.innerHTML.replace(postContent.innerHTML.match(photos_reg)[i],div.outerHTML);
}
###

因为你没提供串,所以我就自己构造了一个。

先来试试匹配规则。

看上去没问题,都可以匹配到
image.png

然后不用看了,最后面这里有问题

postContent.innerHTML.match(photos_reg)[i] 这里不对,因为你已经把前面的替换走了,所以每次都要替换第一个
image.png

###
var postContent = `
[photos]https://abc.com,壁纸1[/photos]
[photos]https://abc.com,壁纸2 https://abc.com,壁纸3[/photos]
`;
var allPhotos = postContent.match(/\[photos](.*?)\[\/photos\]/g);
for (let photo of allPhotos) {
  let items = photo.split(" ");
  let div = document.createElement("div");
  div.classList = "photos";
  for (let item of items) {
    let [url, des] = item.split(",");
    let figure = document.createElement("figure");
    figure.classList = "photos-img";
    figure.innerHTML = `
            <a href="${url}" target="_blank">
                ![](${des})
            </a>
            `;
    div.appendChild(figure);
  }
  postContent = postContent.replace(photo, div.outerHTML);
}
  console.log(postContent);

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • js利用正则匹配关键字符串处理后的结果

    js利用正则匹配关键字符串处理后的结果

  • 网站图片的压缩方法

    网站图片的压缩方法

  • vue使用 elementui   navMeum实现嵌套

    vue使用 elementui navMeum实现嵌套

  • vue template中使用ts import子组件后

    vue template中使用ts import子组件后

腾讯云代理商
海外云服务器