Convert HTML tags to WordML with JavaScript

Question

Do you know any way to convert HTML tags to WordML only using JavaScript. I need to get the content of a DOM element and convert what is inside to WordML.

Answer 1

Looking on npm there doesn't seem to be a library for this already.

So I think you're going to have to make your own. That being said, WordML is just a particular flavor of XML, right? This is the WordML you are referring to?

So to get the content of of a DOM element is pretty easy, you can do that with jQuery.

var ele = $('#wordml-element');

From there you will now want to convert it into WordML compatible XML. You could try using the xml library on npm for this.

So you will be transforming tree structured DOM elements into tree structured XML elements. The recommended pattern for doing this is known as the Visitor Pattern.

From there you will be left with an XML structure which you can further manipulate using the same pattern. At the end you will convert the XML structure into a string and that is what you will save to a file.

Now since I don't really know the structure of the HTML you are trying to convert into WordML I can only give you a very general code solution to the problem, which may look something like this:

var xml = require('xml')

function onTransformButtonClick() {
  var options = {} // see documentation
  var ele = $('#wordml-element')[0]
  var wordml = transformElement(ele)
  var text = xml(wordml, options);
  fileSave(text);
}

function transformElement(ele) {
  switch(ele.tagName) { // You could use attributes or whatever
    case 'word-document':
      return transformDocument(ele);
    case 'word-body':
      return transformBody(ele);
    case 'word-p':
      return transformParagraph(ele);
    case 'word-r':
      return transformRun(ele);
    case 'word-text':
      return transformText(ele);
  }
}

function transformDocument(ele) {
  var wordDocument = xml.element({...})
  ele.childNodes.forEach(function (child) {
    wordDocument.push(transformElement(child))
  })
  return [wordDocument]
}

function transformBody(ele) {
  // create new element via xml library...
}

function transformParagraph(ele) {
  // create new element via xml library...
}

function transformRun(ele) {
  // create new element via xml library...
}

function transformText(ele) {
  // create new element via xml library...
}

The specific implementations of which I will leave up to you since I don't know enough details to give you a more detailed answer.