JSFiddle - React, Tailwind, and code Playground

by ofirattia

JavaScript

var htmlcon = `<div class="devicedetails_support_info usc-wysiwyg">

            <div class="usc-grid">

                <div class="usc-grid__col col-12">

                    <h3>Device Support</h3>

                    <p><a href="http://www.apple.com/support/iphone/">Product Support Page</a></p>

                    <p><a href="/content/iphone-11/specs.html">Technical Specifications</a></p>
                    
                                        <p><a target="_blank" href="/content/iphone-11/specs.html">Technical Specifications</a></p>

        </div>

            </div>

</div>`;
var baseURL = "http://wesit4.non-prod.uscc.com/";
function replaceByPattern(regex, htmlContent) {
    var tempContent = htmlContent;
	while (matches = regex.exec(htmlContent)){
  		console.log(matches);
      if (matches[1].includes('http')) {
                    htmlContent = htmlContent.replace(matches[0], `onclick="deviceapis.open('${matches[1]}')"`);

                } else {

                    const fileUrl = matches[0].substr(matches[0].search(/\/[a-z|A-Z]/g) + 1);
                    htmlContent = htmlContent.replace(matches[0], `onclick="deviceapis.open('${baseURL}${fileUrl}')"`);

                }


  }
  return htmlContent;

}
function changeLinks(content) {
  // REPLACING HREF with ONCLICK
  htmlContent = content;
  const re = new RegExp("href=\"([^\"]+)\"", "g");
  const re_target = new RegExp("<a target=\"_blank\" href=\"([^\"]+)\"", "g");
  htmlContent = replaceByPattern(re, htmlContent);
  htmlContent = replaceByPattern(re_target, htmlContent);

  return htmlContent;
  }
  
  console.log(changeLinks(htmlcon));