JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<div>
    <h3>Links</h3>
    <a ng-repeat="url in urls" ng-href="{{url}}">{{url}}</a><br ng-repeat-end />
</div>

<div>
    <h3>Scripts</h3>
    <div ng-repeat="url in scriptUrls">
        <script type="text/javascript" ng-src="{{url}}"></script>
    </div>
</div>

JavaScript

var app = angular.module('myApp', []);

app.controller('myController', function ($scope) {
    $scope.urls = [
        'https://www.google.com',
        'https://www.example.com',
        'https://www.angularjs.org'
    ];
    $scope.scriptUrls = [
        'https://example.com/script1.js',
        'https://example.com/script2.js',
        'https://example.com/script3.js',
        'https://example.com/script4.js'
    ];
});

app.run(function ($rootScope, $timeout) {
    $rootScope.$watch(
        function () { return document.body.innerHTML; },
        function (newVal, oldVal) {
            if (newVal !== oldVal) {
                $timeout(function () {
                    // Avoid direct DOM manipulation, handle necessary logic here
                    console.log('DOM has been updated.');
                    // Any further logic can be added here
                }, 0);
            }
        }
    );
});

function decodeHTML(encodedStr) {
    var parser = new DOMParser();
    var doc = parser.parseFromString(encodedStr, 'text/html');
    return doc.documentElement.textContent;
}

document.addEventListener('DOMContentLoaded', function() {
    var encodedStr = "&lt;script type=\\&quot;text/javascript\\&quot; ng-src=\\&quot;https://example.com/script1.js\\&quot; src=\\&quot;https://example.com/script1.js\\&quot;&gt;&lt;/script&gt;";
    console.log(decodeHTML(encodedStr));
    alert(decodeHTML(encodedStr));
});