Replacement

Benchmark created on

Preparation HTML

<main class="gfu-layout__main gfu-layout__main--extranarrow _pt-6">
        


        <div class="_mb-2" data-qa="pledge-manager-home:ProjectDescriptionBox">
            <h2 class="gfu-heading gfu-heading--top-divider" id="js-magic-anchor-cc8a9fd8-8376-4221-96bc-5740b58f7a99">Project overview</h2>
        </div>
        <div class="_mb-3">
            <div class="gfu-richtext gfu-richtext--article">
                <div>Test description<img src="/image/richtextimage/richtext/ced0402f-01c3-4ff6-8b46-970cdcdeb791.png" data-image-proportions="0.1675"></div>
            </div>
        </div>

<script>
    (function() {
        var sectionOptions = {"anchorElementID":"js-magic-anchor-cc8a9fd8-8376-4221-96bc-5740b58f7a99","name":"Project Overview","urlName":"project-overview","isTopLevel":true,"anchorScrollOffset":null};
        new Gamefound.Plugins.PageSectionAnchor(
                document.getElementById(sectionOptions.anchorElementID),
                sectionOptions.name,
                sectionOptions.urlName,
                sectionOptions.isTopLevel,
                sectionOptions.anchorScrollOffset);
    })();
</script>

        
            

            
    <div data-qa="all-categories-box">
        <div class="gfu-list-info">
    <div class="">
        <h2 id="magic-anchor-6727247f-a8ca-4cba-996f-903b363165b3" class="gfu-heading gfu-heading--top-divider _mt-3">

<div class="gfu-dropdown gfua-editing-control" id="vue-app-category-admin">
    
<div id="vue-component-d88b8dff-87fc-454f-bf20-cceafa61cce2"></div>
<script>
    (function () {
        new Vue({
            el: '#vue-component-d88b8dff-87fc-454f-bf20-cceafa61cce2',
            name: 'Components.CategoryEditMenu',
            router: Gamefound.Router,
            store: Gamefound.Store,
            pinia: Gamefound.Stores,
            render: function (h) {
                return h(Gamefound.Components.CategoryEditMenu, {"props":{"dataQa":"category-edit-menu:1","creatorUrlName":"creator-v1","projectUrlName":"PledgeManagerV1","categoryId":1,"text":"Manage this category"},"class":null});
            }
        });
    })();
</script>
</div>            <span>Pledges</span>

        </h2>

<script>
    (function() {
        var sectionOptions = {"anchorElementID":"magic-anchor-6727247f-a8ca-4cba-996f-903b363165b3","name":"Pledges","urlName":"pledges-1","isTopLevel":true,"anchorScrollOffset":null};
        new Gamefound.Plugins.PageSectionAnchor(
                document.getElementById(sectionOptions.anchorElementID),
                sectionOptions.name,
                sectionOptions.urlName,
                sectionOptions.isTopLevel,
                sectionOptions.anchorScrollOffset);
    })();
</script>

    </div>
</div>



<div id="vue-component-a37d943c-9bca-4e2f-a270-cb4a81fb0ad3"></div>
<script>
    (function () {
        new Vue({
            el: '#vue-component-a37d943c-9bca-4e2f-a270-cb4a81fb0ad3',
            name: 'Components.Projects.ProjectProductCardList',
            router: Gamefound.Router,
            store: Gamefound.Store,
            pinia: Gamefound.Stores,
            render: function (h) {
                return h(Gamefound.Components.Projects.ProjectProductCardList, {"props":{"products":[{"abstract":"Abstract","categoryID":1,"effectivePrice":815.0,"hasLimitedStock":false,"imageUrl":"https://localhost:5001/image/productimage/noimage.jpg","isDigital":false,"isDiscounted":false,"isFeatured":false,"name":"CoreBox WithOptions","price":815.0,"productCanBePurchased":true,"productCanBePurchasedDescription":null,"productID":1,"projectID":1,"remainingStockLimit":null,"url":"/projects/creator-v1/pledgemanagerv1/products/details/1","visibleToUserGroupNames":[],"productState":2},{"abstract":"Abstract","categoryID":1,"effectivePrice":338.0,"hasLimitedStock":false,"imageUrl":"https://localhost:5001/image/productimage/noimage.jpg","isDigital":false,"isDiscounted":false,"isFeatured":false,"name":"CoreBox WithMultipleOptions","price":338.0,"productCanBePurchased":true,"productCanBePurchasedDescription":null,"productID":2,"projectID":1,"remainingStockLimit":null,"url":"/projects/creator-v1/pledgemanagerv1/products/details/2","visibleToUserGroupNames":[],"productState":2},{"abstract":"Abstract","categoryID":1,"effectivePrice":860.0,"hasLimitedStock":true,"imageUrl":"https://localhost:5001/image/productimage/noimage.jpg","isDigital":false,"isDiscounted":false,"isFeatured":false,"name":"CoreBox WithOptions StockLimit","price":860.0,"productCanBePurchased":true,"productCanBePurchasedDescription":null,"productID":3,"projectID":1,"remainingStockLimit":2,"url":"/projects/creator-v1/pledgemanagerv1/products/details/3","visibleToUserGroupNames":[],"productState":2},{"abstract":"Abstract","categoryID":1,"effectivePrice":363.0,"hasLimitedStock":false,"imageUrl":"https://localhost:5001/image/productimage/projects/1/somefancypath%0Cilename.png","isDigital":false,"isDiscounted":true,"isFeatured":false,"name":"Product With Images","price":383.0,"productCanBePurchased":true,"productCanBePurchasedDescription":null,"productID":4,"projectID":1,"remainingStockLimit":null,"url":"/projects/creator-v1/pledgemanagerv1/products/details/4","visibleToUserGroupNames":[],"productState":2},{"abstract":"Abstract","categoryID":1,"effectivePrice":905.0,"hasLimitedStock":false,"imageUrl":"https://localhost:5001/image/productimage/noimage.jpg","isDigital":false,"isDiscounted":false,"isFeatured":false,"name":"ProductSet","price":905.0,"productCanBePurchased":true,"productCanBePurchasedDescription":null,"productID":5,"projectID":1,"remainingStockLimit":1,"url":"/projects/creator-v1/pledgemanagerv1/products/details/5","visibleToUserGroupNames":[],"productState":2},{"abstract":"Abstract","categoryID":1,"effectivePrice":428.0,"hasLimitedStock":false,"imageUrl":"https://localhost:5001/image/productimage/noimage.jpg","isDigital":false,"isDiscounted":false,"isFeatured":false,"name":"ProductSetToSplit","price":428.0,"productCanBePurchased":true,"productCanBePurchasedDescription":null,"productID":6,"projectID":1,"remainingStockLimit":null,"url":"/projects/creator-v1/pledgemanagerv1/products/details/6","visibleToUserGroupNames":[],"productState":2},{"abstract":"Abstract","categoryID":1,"effectivePrice":248.0,"hasLimitedStock":false,"imageUrl":"https://localhost:5001/image/productimage/noimage.jpg","isDigital":false,"isDiscounted":false,"isFeatured":false,"name":"CoreBox WithoutOptions","price":248.0,"productCanBePurchased":true,"productCanBePurchasedDescription":null,"productID":7,"projectID":1,"remainingStockLimit":null,"url":"/projects/creator-v1/pledgemanagerv1/products/details/7","visibleToUserGroupNames":[],"productState":2},{"abstract":"Abstract","categoryID":1,"effectivePrice":950.0,"hasLimitedStock":false,"imageUrl":"https://localhost:5001/image/productimage/noimage.jpg","isDigital":true,"isDiscounted":false,"isFeatured":false,"name":"Digital Product","price":950.0,"productCanBePurchased":true,"productCanBePurchasedDescription":null,"productID":8,"projectID":1,"remainingStockLimit":3,"url":"/projects/creator-v1/pledgemanagerv1/products/details/8","visibleToUserGroupNames":[],"productState":2},{"abstract":"Abstract","categoryID":1,"effectivePrice":771.0,"hasLimitedStock":true,"imageUrl":"https://localhost:5001/image/productimage/noimage.jpg","isDigital":false,"isDiscounted":false,"isFeatured":false,"name":"CoreBox WithoutOptions StockLimit","price":771.0,"productCanBePurchased":true,"productCanBePurchasedDescription":null,"productID":25,"projectID":1,"remainingStockLimit":2,"url":"/projects/creator-v1/pledgemanagerv1/products/details/25","visibleToUserGroupNames":[],"productState":2},{"abstract":"Abstract","categoryID":1,"effectivePrice":293.0,"hasLimitedStock":false,"imageUrl":"https://localhost:5001/image/productimage/noimage.jpg","isDigital":false,"isDiscounted":false,"isFeatured":false,"name":"CoreBox WithoutOptions WithStockLimitStockNotDisplayed","price":293.0,"productCanBePurchased":true,"productCanBePurchasedDescription":null,"productID":26,"projectID":1,"remainingStockLimit":2,"url":"/projects/creator-v1/pledgemanagerv1/products/details/26","visibleToUserGroupNames":[],"productState":2}],"checkoutUrl":"/projects/creator-v1/pledgemanagerv1/checkout/authenticate","cartUrl":"/projects/creator-v1/pledgemanagerv1/cart"},"class":null});
            }
        });
    })();
</script>

    </div>

        

        <div class="_mt-4">

<div id="vue-component-c4f27b94-b2d9-4871-bca1-3b9abf6c3880"></div>
<script>
    (function () {
        new Vue({
            el: '#vue-component-c4f27b94-b2d9-4871-bca1-3b9abf6c3880',
            name: 'Components.Projects.ProjectRecommendations',
            router: Gamefound.Router,
            store: Gamefound.Store,
            pinia: Gamefound.Stores,
            render: function (h) {
                return h(Gamefound.Components.Projects.ProjectRecommendations, {"props":{"excludeProjectIds":[1],"quantity":12,"source":"projectHome","title":"Other projects you may like"},"class":null});
            }
        });
    })();
</script>        </div>
    </main>

Setup

window.inputHTML = document.body.innerHTML;

function replaceImageWithDiv_dom(htmlString) {
  const div = document.createElement('div');
  div.innerHTML = htmlString;

  const images = div.getElementsByTagName('img');
  for (let i = 0; i < images.length; i++) {
    const img = images[i];
    const src = img.getAttribute('src');
    const id = img.getAttribute('id');
    const proportions = img.hasAttribute('data-image-proportions') ? parseFloat(img.getAttribute('data-image-proportions')) : null;

    if (proportions !== null) {
      const divWrapper = document.createElement('div');
      divWrapper.className = 'gfu-embed';

      const imgReplacement = document.createElement('img');
      imgReplacement.src = src;
      imgReplacement.className = 'gfu-embed__item';
      imgReplacement.style.paddingTop = `${(proportions * 100).toFixed(2)}%`;

      divWrapper.appendChild(imgReplacement);

      img.parentNode.replaceChild(divWrapper, img);
    }
  }

  return div.innerHTML;
}

function replaceImageWithDiv_regex(htmlString) {
  const regex = /<img((?:\s+\w+(?:-\w+)*(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^>\s]+))?)*\s*\/?>)/g;

  const modifiedHtml = htmlString.replace(regex, (match, attributes) => {
    const src = extractAttributeValue(attributes, 'src');
    const id = extractAttributeValue(attributes, 'id');
    const proportions = extractAttributeValue(attributes, 'data-image-proportions');

    if (src && id && proportions) {
      const paddingTop = (parseFloat(proportions) * 100).toFixed(2);
      return `<div class="gfu-embed"><img src="${src}" class="gfu-embed__item" style="padding-top: ${paddingTop}%;" /></div>`;
    } else {
      return match;
    }
  });

  return modifiedHtml;
}

function extractAttributeValue(attributes, attributeName) {
  const regex = new RegExp(`${attributeName}\\s*=\\s*(['"])(.*?)\\1`);
  const match = attributes.match(regex);
  return match ? match[2] : null;
}

Test runner

Ready to run.

Testing in
TestOps/sec
Regex
replaceImageWithDiv_dom(window.inputHTML);
ready
DOM
replaceImageWithDiv_regex(window.inputHTML);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.