将innerhtml拆分为文本，以便在javascript中转换JSON

目前我正在开发一个应用程序，它需要提取Body的innerHTML，然后在JSON中从中提取文本。该JSON将用于翻译，然后翻译后的JSON将用作输入，以创建相同的HTML标记，但带有翻译后的文本。请参阅下面的代码片段

HTML输入

您好，这是我需要提取的一些文本。它可能会复杂。如果span、p或标记中有html标记，则提取的文本应包含html标记请查看下面所需的输出。
谢谢；

翻译JSON输出

{
“text1”：“你好，”，
“文本2”：“这是我需要提取的一些文本。”，
“text3”：“它可以复杂。”，
“text4”：“提取的文本应包含html标记，如果
span、p或a标记中有任何html标记“，
“text5”：“请参阅下面所需的输出。”，
“text6”：“谢谢！”
}

翻译的JSON输入

{
“text1”：“你好，西班牙语”，
“文本2”：“这是我需要提取的一些文本。-西班牙语”，
“text3”：“它可以复杂。-在西班牙语中，”，
“text4”：“提取的文本应包含html标记，如果
在span、p或西班牙语中有任何html标记“，
“text5”：“请参阅下面所需的输出。-西班牙语”，
“text6”：“谢谢！-西班牙语”
}

翻译的HTML输出

Hello，-在西班牙语中，这是我需要提取的一些文本。-在西班牙语中，它可能会复杂。-在西班牙语中提取的文本应该包含html标记，如果它在span、p或西班牙语中有任何html标记请查看下面所需的输出。
谢谢-西班牙语'；

我尝试了各种正则表达式，但下面是我最后完成的一个流，但我无法用它实现所需的输出

//编码
const bodyHTML='hello world这将很难'；
//用转义引号替换引号
const htmlContent=bodyHTML.replace（/“/g，\\”）；
让计数=0；
设translationObj={}；
让newHtml=htmlContent.replace（/\>（.*？）\\\）到目前为止，最好的方法是使用HTML解析器，然后在树中的文本节点之间循环。您无法正确地处理像HTML这样的非规则标记语言，而只使用简单的JavaScript正则表达式1（许多人已经浪费了很多时间），这甚至没有考虑到HTML的所有特定特性

在
npm
上，至少有几个、可能有几个经过良好测试的、受积极支持的DOM解析器模块可用

因此，基本结构将是：

将HTML解析为DOM

按照定义的顺序（通常是深度优先遍历）遍历DOM，构建要从遇到的文本节点转换的对象或文本字符串数组

如有必要，将该对象/数组转换为JSON，将其发送进行翻译，返回结果，如有必要，再次将其从JSON解析为对象/数组

以相同的顺序遍历DOM，应用对象/数组的结果

将DOM序列化为HTML

发送结果

下面是一个例子——很自然，我使用的是内置在浏览器中的HTML解析器，而不是
npm
模块，您使用的任何模块的API都可能略有不同，但概念是相同的：


var html='您好，这是我需要提取的一些文本。它可能会复杂。如果span、p或a标记中有html标记，则提取的文本应包含html标记请查看下面所需的输出。
谢谢；
var dom=parseHTML（html）；
var字符串=[]；
walk（dom，函数（节点）{
如果（node.nodeType==3）{//text节点
strings.push（node.nodeValue）；
}
});
console.log（“strings=”，strings）；
var translation=translation（字符串）；
console.log（“translation=”，translation）；
var n=0；
walk（dom，函数（节点）{
如果（node.nodeType==3）{//text节点
node.nodeValue=翻译[n++]；
}
});
var newHTML=serialize（dom）；
document.getElementById（“before”）.innerHTML=html；
document.getElementById（“after”）.innerHTML=newHTML；
函数转换（字符串）{
返回strings.map（str=>str.toUpperCase（））；
}
函数漫游（节点，回调）{
var-child；
回调（节点）；
开关（node.nodeType）{
案例1://要素
for（child=node.firstChild；child；child=child.nextSibling）{
步行（儿童、回叫）；
}
}
}
//模块函数的占位符
函数解析html（html）{
var div=document.createElement（“div”）；
div.innerHTML=html；
返回div；
}
//模块函数的占位符
函数序列化（dom）{
返回dom.innerHTML；
}
之前：
之后：
如果有人想做这样的事情，那么我在这里创建了这个翻译服务


我的目标不是要达到100%的破句成功率，而是尽可能多的句子。我只是想在输入html时帮助别人翻译。希望这能在将来对别人有所帮助

干杯

输出
您可以在客户端中使用以下命令提取文本：jQuery（“body:contains（text）”）.text（）-如果你的可提取元素有一个特定的css类，你可以增强。哦，有人正在用正则表达式解析HTML。不过，说真的，也许可以找一些类似JSoup for JS的东西。除非我误解了这一点。你如何判断HTML标记是否是内部标记？在你的示例中，你说你想要
这是一些[…]要提取。它可能会复杂。
要变成
这是我需要提取的一些文本。/“它可能会复杂。”
。但是在你说你想
之后，点击这里
变成
“点击这里”
。我将使用Node.js创建类似mi的东西
<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>';

{
"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!"
}

{
"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"
}

<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>';