Parse HTML to modify it

I'm using the following code to parse html, This code is working but since I'm new to JavaScript and working in alone project I would appreciate if you can give me some tips and feedback how can I improve this code,or it is fine...

The requirements are:

• Insert a new script after given script ID(in the code after test-ui-bootstrap')

• For given script ID update attribute value (when the key is given)

code need to update script content after existing script with new content.
The code is working and I use part of it from SO past post

https://jsfiddle.net/st6xg7Lj/1/

Here is the code to convert and convert back

function parseHtml(html) {

  // replace html, head and body tag with html_temp, head_temp and body_temp
  html = html.replace(//i, '');
  html = html.replace(/(: the html() function returns only the contents of an element
  html = ""+html+""; 
  var element = $(html); // parse the html

  return element;
}

function convertBackToHtml(element) {

  // reset the initial changes (_temp)
  var extended_html = element.html();
  extended_html = extended_html.replace(//, '');
  extended_html = extended_html.replace(/()/g)) {
    extended_html = extended_html.replace(/()/g, "$1'$3");
  }

  return extended_html;
}

Here is the code to create new script with content and update the values

var html = $('textarea.input').val();

  // parse the html to an element
  var element = parseHtml(html);

  // do your calculations on the parsed html
  $("alert(\"test\");").insertAfter(element.find('#test-ui-bootstrap'));
  element.find("#test-ui-bootstrap").attr('data-test-ui-libs123', "test.bbb");
  element.find("#test-ui-bootstrap").attr('src', 'resources/aaaa/test-ui-core.js');

  // convert the element back to html
    var extended_html = convertBackToHtml(element);

Since I need to run this code in production very soon and Im fairly new In JS I'd like to get your feedback,I really need it.

The code itself is working OK

To solve the root of your problem, I suggest you actually modify the source of that HTML. Add your scripts and attributes there instead of creating this voodoo with JS.

Now if this is the only way you could do it (sigh)...

First, jQuery cannot parse full HTML and I think you're aware of that. It's also mentioned in the documentation how it creates jQuery objects for complex markup.


If the HTML is more complex than a single tag without attributes, as it is in the above example, the actual creation of the elements is handled by the browser's .innerHTML mechanism. In most cases, jQuery creates a new element and sets the innerHTML property of the element to the HTML snippet that was passed in.

An alternative way to do it is to just skip all this work and just inject an external script instead. You could look for `` or some element in the markup that's guaranteed to always be there, and replace it with markup containing your external script.

var htmlWithInjectedScript = html.replace('', '');

This way, you don't have to mangle the markup while having a place to run JavaScript in all its glory. This assumes that the markup is actually executed somewhere, not just for show and tell and that your script is in a location that's always available.

StackExchange Code Review Q#125045, answer score: 2