Разделить innerhtml на текст для перевода JSON в JavaScript

Question

В настоящее время я работаю над приложением, которое должно извлечь innerHTML из Body, а затем извлечь текст из него в формате JSON.Этот JSON будет использоваться для перевода, а затем переведенный JSON будет использоваться в качестве входных данных для создания той же разметки HTML, но с переведенным текстом.Ниже приведен фрагмент кода.

Ввод HTML

<section>Hello, <div>This is some text which I need to extract.<a class="link">It can be <strong> complicated.</strong></a></div><span>The extracted text should contain the html tag if it has any html tag in the span,p or a tag</span><p>Please see the <span>desired output below.</span></p>Thanks!</section>';

Перевод JSON-вывода

{
"text1":"Hello, ",
"text2":"This is some text which I need to extract.",
"text3":"It can be <strong> complicated.</strong>",
"text4":"The extracted text should contain the html tag if it 
             has any html tag in the span,p or a tag",
"text5":"Please see the <span>desired output below.</span>",
"text6":"Thanks!"
}

Перевод JSON-ввода

{
"text1":"Hello,-in spanish ",
"text2":"This is some text which I need to extract.-in spanish",
"text3":"It can be <strong> complicated.-in spanish</strong>",
"text4":"The extracted text should contain the html tag if it 
             has any html tag in the span,p or a tag-in spanish",
"text5":"Please see the <span>desired output below.-in spanish</span>",
"text6":"Thanks!-in spanish"
}

Перевод HTML-вывода

<section>Hello,-in spanish <div>This is some text which I need to extract.-in spanish<a class="link">It can be <strong> complicated.-in spanish</strong></a></div><span>The extracted text should contain the html tag if it has any html tag in the span,p or a tag-in spanish</span><p>Please see the <span>desired output below.</span></p>Thanks!-in spanish</section>';

Я пробовал различные регулярные выражения, но ниже приведен один из потоков, которые я закончил, но я не могу достичь желаемого результата с этим.

//encode
const bodyHTML = '<a class="test">hello world<strong> this is gonna be hard</strong></a>';
//replace the quotes with escape quotes
const htmlContent = bodyHTML.replace(/"/g, '\\"');
let count = 0;
let translationObj = {};
let newHtml = htmlContent.replace(/\>(.*?)\</g, function(match) {
  //remove the special character	
  match = match.replace(/\>|\</g, '');
  count = count + 1;
  translationObj[count] = match;

  return '>~' + count + '~<';
});

const translationJSON = '{"1":"hello world in spanish","2":" this is gonna be hard in spanish","3":""}';

//decode
let trasnaltedHtml = '';
const translatedObj = JSON.parse(translationJSON)
trasnaltedHtml = newHtml.replace(/\~(.*?)\~/g, function(match) {
  //remove the special character	
  match = match.replace(/\~|\~/g, '');

  return translatedObj[match];
});
//replace the escape quotes with quotes
trasnaltedHtml = trasnaltedHtml.replace(/\\"/g, '"');
//console.log()
console.log("bodyHTML", bodyHTML);
console.log('tranlationObj', translationObj);
console.log("translationJSON", translationJSON);
console.log('newHtml', newHtml);
console.log("trasnaltedHtml", trasnaltedHtml);

Я ищу работающее регулярное выражение или любой другой подход в мире JS, который бы дал желаемый результат.Я хочу получить весь текст внутри HTML в форме JSON.Другое условие - не разбивать текст, если у него есть некоторые внутренние html-теги, чтобы мы не теряли контекст предложения, например <p>Click <a>here</a></p>, его следует рассматривать как один текст "Click <a>here</a>".Надеюсь я прояснил все сомнения

Заранее спасибо!

Answer 1

Если кто-то хочет сделать что-то подобное, я создал эту услугу перевода здесь

https://github.com/gurusewak/translation

Моя цель состояла не в достижении 100% успеха в нарушении предложений, а в том, чтобыполучить как можно больше предложений.Я просто пытался помочь кому-то сделать перевод, когда мне дали html.Надеюсь, это может помочь кому-то в будущем.

Ура!

Выход

Выход потока здесь

Answer 2

Безусловно, лучший способ сделать это - использовать анализатор HTML, а затем перебирать текстовые узлы в дереве.Вы не можете правильно обрабатывать нерегулярный язык разметки, такой как HTML, с помощью простых регулярных выражений JavaScript JavaScript (многие потратили много времени на попытки), и это даже не принимая во внимание все специфические особенности HTML.

по крайней мере, пара, возможно, несколько хорошо протестированных активно поддерживаемых модулей синтаксического анализа DOM, доступных на npm.

Таким образом, базовая структура будет выглядеть так:

1. ParseHTML в DOM.

2. Пройдите по DOM в определенном порядке (как правило, в обход глубины), создавая ваш объект или массив текстовых строк для перевода из текстовых узлов, с которыми вы сталкиваетесь.

3. При необходимости преобразуйте этот объект / массив в JSON, отправьте его для перевода, получите результат обратно, снова проанализируйте его из JSON в объект / массив, если необходимо.

4. Пройдите по DOM в том же порядке, применяя результаты объекта / массива.

5. Сериализуйте DOM в HTML.

6. Отправьте результат.

Вот пример - естественно, здесь я использую синтаксический анализатор HTML, встроенный в браузер, а не модуль npm, и API длякакой бы модуль вы не использовали, он может немного отличаться, но концепция одна и та же:

var html = '<section>Hello, <div>This is some text which I need to extract.<a class="link">It can be <strong> complicated.</strong></a></div><span>The extracted text should contain the html tag if it has any html tag in the span,p or a tag</span><p>Please see the <span>desired output below.</span></p>Thanks!</section>';
var dom = parseHTML(html);
var strings = [];
walk(dom, function(node) {
  if (node.nodeType === 3) { // text node
    strings.push(node.nodeValue);
  }
});
console.log("strings = ", strings);
var translation = translate(strings);
console.log("translation = ", translation);
var n = 0;
walk(dom, function(node) {
  if (node.nodeType === 3) { // text node
    node.nodeValue = translation[n++];
  }
});
var newHTML = serialize(dom);
document.getElementById("before").innerHTML = html;
document.getElementById("after").innerHTML = newHTML;


function translate(strings) {
  return strings.map(str => str.toUpperCase());
}

function walk(node, callback) {
  var child;
  callback(node);
  switch (node.nodeType) {
    case 1: // Element
      for (child = node.firstChild; child; child = child.nextSibling) {
        walk(child, callback);
      }
  }
}

// Placeholder for module function
function parseHTML(html) {
  var div = document.createElement("div");
  div.innerHTML = html;
  return div;
}

// Placeholder for module function
function serialize(dom) {
  return dom.innerHTML;
}

<strong>Before:</strong>
<div id="before"></div>
<strong>After:</strong>
<div id="after"></div>

---

¹ Некоторые библиотеки "regex" (или функции regex других языков) действительно regex + больше функций, которые могут помочь вам сделать что-топохожи, но они не просто регулярные выражения, а встроенные JavaScript не имеют этих функций.