JSFiddle - React, Tailwind, and code Playground

by Alexey Ryazhskikh

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 <div class="controls">
        <select id="source">
            <option value="en" data-t selected>English</option>
        </select>
        <select id="target">
            <option value="fr" data-t selected>French</option>
            <option value="ru" data-t>Russian</option>
            <option value="ja" data-t>Japanese</option>
            <option value="ko" data-t>Korean</option>
            <option value="zh" data-t>Chinese</option>
        </select>
        <button type="button" id="translateButton" data-t>Translate</button>
        <div id="translating" class="hidden" data-t>Translating...</div>
    </div>
    <table id="translationBox">
        <tr>
            <td id="inputBox">
                <div id="inputTextEditor" contenteditable="true" class="textEditor">
                    This is a test.
                </div>
            </td>
            <td id="outputBox">
                <div id="outputTextEditor" class="textEditor">
                </div>
            </td>
        </tr>
    </table>

JavaScript

jQuery(function($) {
  'use strict';

  // Function to call the SYSTRAN Translate Api translate/
  function translate(source, target, content, callback) {
    $.ajax({
      method:'POST',
      url: 'https://patentseekers.mysystran.com:8904/translation/text/translate?key=7e6c7803-67db-491f-8bf9-cdc01b93ccdd',
      dataType: 'text',
      data: {
        source: source,
        format: "json",
        target: target,
        input: JSON.stringify({name1:"This is test", language: "cats says purr"})
      },
      success: function(data) {
        if (typeof data === 'string')
          try {
            data = JSON.parse(data);
            console.log(data);
          } catch (exp) {

          }

        var err;

        if (data && data.outputs && Array.isArray(data.outputs)) {
          data = data.outputs[0];

          if (data && data.output)
            data = data.output;

          if (data && data.error)
            err = data.error;
        }

        callback(err, data);
      },
      error: function(xhr, status, err) {
        callback(err);
      }
    });
  }

  function getTextFromHtml(content) {
    content = content.replace(/<div>(?:<br>)?/gi, '\n').replace(/<\/div>/gi, '');
    content = content.replace(/<p>&nbsp;<\/p>/gi, '\n').replace(/<p>/gi, '').replace(/\n*<\/p>/gi, '\n');
    content = content.replace(/<br[ \/]*>/gi, '\n');
    content = content.replace(/&nbsp;/gi, ' ');
    content = content.replace(/<([^> ]*)[^>]*>/gi, '');  //clean html markup
    content = content.replace(/&lt;/gi, "<").replace(/&gt;/gi, ">"); //unescape some entities
    return content;
  }

  var $inputTextEditor = $('#inputTextEditor');
  var $outputTextEditor = $('#outputTextEditor');
  var $translating = $('#translating');
  var $source = $('#source');
  var $target = $('#target');

  function launchTranslation() {
    $translating.removeClass('hidden');
    //Extract text to translate
    var toTranslate = getTextFromHtml($inputTextEditor.html());
   ...