JSFiddle - React, Tailwind, and code Playground

by web-nfo.com

HTML

<p>Input:</p>
<textarea id="input">
<img alt="assets" src="/assets/85000005/product_images/kv_i-tjes_Binnenwerk_StandaardPapier_300x111.jpg" />
<img alt="assets" src="http://10.1.102.125/assets/85000005/product_images/test.jpg" />
<img alt="assets" src="assets/85000005/product_images/test.jpg" />
<img alt="assets" src="/assets/85000005/product_images/test.jpg" />
<img alt="assets" src="http://10.1.102.125/assets/85000005/product_images/test.jpg" />
<img alt="assets" src="assets/85000005/products/test.jpg" />
<img alt="assets" src="/assets/85000005/products/test.jpg" />
<img alt="assets" src="http://10.1.102.125/assets/85000005/producs/test.jpg" />
<img alt="images" src="http://10.1.102.125/images/de_DE/product_images/test.jpg" />
<img alt="images" src="http://10.1.102.125/images/de_DE/products/test.jpg" />
<img alt="images" src="images/de_DE/test.jpg" />
<img alt="images" src="/images/de_DE/test.jpg" />
<img alt="images" src="//images/de_DE/test.jpg" />
<img alt="images" src="images/test.jpg" />
<img alt="images" src="/images/test.jpg" />
<img alt="images" src="//images/test.jpg" />
</textarea>
<br />
<br />
<p>Output:</p>
<textarea id="output"></textarea>
<p>(NEW):</p>
<textarea id="output_NEW"></textarea>

CSS

textarea {
    width:100%;
    height:280px;
}

JavaScript

function getDesignContent(content)
{
    //var newContent = content.replace(/<!DOCTYPE(.*)">/g, '');
         //newContent = newContent.replace(/<html>([^\n]*\n+)+(.*)<body>([^\n]*\n+)+(.*)<p>/g, '');
         //newContent = newContent.replace(/<\/p>([^\n]*\n+)+(.*)<\/body>([^\n]*\n+)+(.*)<\/html>/g, '');
         //var newContent = content.replace(/<img(.*)src="(.*)\/(images|assets)\/([^"]*)"/g, '<img$1src="http://10.1.102.125/$3/$4"');
         var result = content.match(/src="[^"]*cs\.photoprintit\.com/gi);
         if(result) {
            var newContent = content.replace(/,DanaInfo=.*[+]/g, '');
         } else {
             var newContent = content.replace(/src="[^"]*((images\/|assets\/){1,})(.*?)([.][a-zA-Z]{3})/g, 'src="http://10.1.102.125/$1$3$4');
             newContent = newContent.replace(/,DanaInfo=.*[+]/g, '');
         }
         return newContent;
}

function getDesignContent_NEW(content)
{
    //var newContent = content.replace(/<!DOCTYPE(.*)">/g, '');
         //newContent = newContent.replace(/<html>([^\n]*\n+)+(.*)<body>([^\n]*\n+)+(.*)<p>/g, '');
         //newContent = newContent.replace(/<\/p>([^\n]*\n+)+(.*)<\/body>([^\n]*\n+)+(.*)<\/html>/g, '');
         //var newContent = content.replace(/<img(.*)src="(.*)\/(images|assets)\/([^"]*)"/g, '<img$1src="http://10.1.102.125/$3/$4"');
         var result = content.match(/src="[^"]*cs\.photoprintit\.com/gi);
         if(result) {
            var newContent = content.replace(/,DanaInfo=.*[+]/g, '');
         } else {
             var newContent = content.replace(/src="[^"]*((\/images\/|\/assets\/){1,})(.*?)([.][a-zA-Z]{3})/g, 'src="http://PREVIEW_URL/$1$3$4');
             newContent = newContent.replace(/,DanaInfo=.*[+]/g, '');
         }
         return newContent;
}

function output(text)
{
    $('#output').html( getDesignContent(text) );
    $('#output_NEW').html( getDesignContent_NEW(text) );
}


$('#input').keyup(function() {
    output( $(this).val() );
});
$('#input').change(function()...