从 HTML 中提取文本，同时保留块级元素换行符 [英] Extract text from HTML while preserving block-level element newlines

查看：29 发布时间：2021/12/22 20:15:03 javascript jquery html text strip

本文介绍了从 HTML 中提取文本，同时保留块级元素换行符的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

背景

大多数关于从 HTML 中提取文本的问题(即剥离标签)使用:

jQuery( htmlString ).text();

虽然这抽象了浏览器的不一致(例如 innerText 与 textContent)，但函数调用也忽略了块级元素(例如 li).

问题

在各种浏览器中保留块级元素的换行符(即语义意图)需要不小的努力，因为迈克威尔科克斯描述.

一个看似更简单的解决方案是模拟将 HTML 内容粘贴到 </code> 中，这会在保留块级元素换行符的同时剥离 HTML.但是，当用户将内容粘贴到 <code><textarea></code> 中时，基于 JavaScript 的插入不会触发浏览器采用的相同 HTML 到文本的例程.</p><p>我还尝试集成 Mike Wilcox 的 <a href="http://clubajax.org/files/lang/plain-text.js" rel="noreferrer">JavaScript 代码</a>.该代码适用于 Chromium，但不适用于 Firefox.</p><h1>问题</h1><p>从 HTML 中提取文本的最简单的跨浏览器方法是什么，同时为 <a href="https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements" rel= 保留语义换行符noreferrer">块级元素</a> 使用 jQuery(或 <a href="http://vanilla-js.com/" rel="noreferrer">vanilla JavaScript</a>)?</p><h1>示例</h1><p>考虑:</p><ol><li>选择并复制整个问题.</li><li>打开<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#HTML_Content" rel="noreferrer">textarea 示例页面</a>.</li><li>将内容粘贴到 textarea 中.</li></ol><p> textarea 为有序列表、标题、预格式化文本等保留换行符.这就是我想要达到的结果.</p><p>进一步澄清，给定任何 HTML 内容，例如:</p><pre><code> <h1> 标题</h1><p>段落</p><ul><li>第一个</li><li>第二个</li></ul><dl><dt>术语</dt><dd>定义</dd></dl><div>Div 与 <span>span</span>.<br/>在 <a href="...">break</a>.</div> 之后</code></pre><p>你会如何生产:</p><前>标题段落第一的第二学期定义带跨度的 Div.休息后.</pre><p>注意:缩进和非规范化空格都不相关.</p><div class="h2_lin"> 解决方案 </div><p>考虑:</p><pre><code>/*** 返回节点的样式.** @param n 要检查的节点.* @param p 要检索的属性(通常是显示").* @link http://www.quirksmode.org/dom/getstyles.html*/this.getStyle = function( n, p ) {返回 n.currentStyle ?n.currentStyle[p] :document.defaultView.getComputedStyle(n, null).getPropertyValue(p);}/*** 将 HTML 转换为文本，保留块级语义换行符* 元素.** @param node - 执行文本提取的 HTML 节点.*/this.toText = 函数(节点){var 结果 = '';if( node.nodeType == document.TEXT_NODE ) {//用一个空格替换重复的空格、换行符和制表符.结果 = node.nodeValue.replace(/s+/g, ' ' );}别的 {for( var i = 0, j = node.childNodes.length; i < j; i++ ) {结果 += _this.toText( node.childNodes[i] );}var d = _this.getStyle( node, 'display' );if( d.match(/^block/) || d.match(/list/) || d.match(/row/) ||node.tagName == 'BR' ||node.tagName == 'HR' ) {结果 += ' ';}}返回结果；}</code></pre><p><a href="http://jsfiddle.net/3mzrV/2/" rel="noreferrer">http://jsfiddle.net/3mzrV/2/</a></p><p>也就是说，除了一两个例外，遍历每个节点并打印其内容，让浏览器的计算样式告诉您何时插入换行符.</p><h1>Background</h1> <p>Most <a href="https://stackoverflow.com/q/822452/59087">questions</a> about extracting text from HTML (i.e., <a href="https://stackoverflow.com/a/1732454/59087">stripping</a> the tags) use:</p><pre><code>jQuery( htmlString ).text(); </code></pre><p>While this abstracts browser inconsistencies (such as <code>innerText</code> vs. <code>textContent</code>), the function call also ignores the semantic meaning of block-level elements (such as <code>li</code>).</p> <h1>Problem</h1> <p>Preserving newlines of block-level elements (i.e., the semantic intent) across various browsers entails no small effort, as <a href="http://clubajax.org/plain-text-vs-innertext-vs-textcontent/" rel="noreferrer">Mike Wilcox describes</a>.</p> <p>A seemingly simpler solution would be to emulate pasting HTML content into a <code><textarea></code>, which strips HTML while preserving block-level element newlines. However, JavaScript-based inserts do not trigger the same HTML-to-text routines that browsers employ when users paste content into a <code><textarea></code>.</p> <p>I also tried integrating Mike Wilcox's <a href="http://clubajax.org/files/lang/plain-text.js" rel="noreferrer">JavaScript code</a>. The code works in Chromium, but not in Firefox.</p> <h1>Question</h1> <p>What is the simplest cross-browser way to extract text from HTML while preserving semantic newlines for <a href="https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements" rel="noreferrer">block-level elements</a> using jQuery (or <a href="http://vanilla-js.com/" rel="noreferrer">vanilla JavaScript</a>)?</p> <h1>Example</h1> <p>Consider:</p><ol> <li>Select and copy this entire question.</li> <li>Open the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#HTML_Content" rel="noreferrer">textarea example page</a>.</li> <li>Paste the content into the textarea.</li> </ol><p>The textarea preserves the newlines for ordered lists, headings, preformatted text, and so forth. That is the result I would like to achieve.</p> <p>To further clarify, given any HTML content, such as:</p><pre><code> <h1>Header</h1> <p>Paragraph</p> <ul> <li>First</li> <li>Second</li> </ul> <dl> <dt>Term</dt> <dd>Definition</dd> </dl> <div>Div with <span>span</span>.<br />After the <a href="...">break</a>.</div> </code></pre><p>How would you produce:</p><pre> Header Paragraph First Second Term Definition Div with span. After the break. </pre><p>Note: Neither indentation nor non-normalized whitespace are relevant.</p><div class="h2_lin"> 解决方案 </div><p>Consider:</p><pre><code>/** * Returns the style for a node. * * @param n The node to check. * @param p The property to retrieve (usually 'display'). * @link http://www.quirksmode.org/dom/getstyles.html */ this.getStyle = function( n, p ) { return n.currentStyle ? n.currentStyle[p] : document.defaultView.getComputedStyle(n, null).getPropertyValue(p); } /** * Converts HTML to text, preserving semantic newlines for block-level * elements. * * @param node - The HTML node to perform text extraction. */ this.toText = function( node ) { var result = ''; if( node.nodeType == document.TEXT_NODE ) { // Replace repeated spaces, newlines, and tabs with a single space. result = node.nodeValue.replace( /s+/g, ' ' ); } else { for( var i = 0, j = node.childNodes.length; i < j; i++ ) { result += _this.toText( node.childNodes[i] ); } var d = _this.getStyle( node, 'display' ); if( d.match( /^block/ ) || d.match( /list/ ) || d.match( /row/ ) || node.tagName == 'BR' || node.tagName == 'HR' ) { result += ' '; } } return result; } </code></pre><p><a href="http://jsfiddle.net/3mzrV/2/" rel="noreferrer">http://jsfiddle.net/3mzrV/2/</a></p> <p>That is to say, with an exception or two, iterate through each node and print its contents, letting the browser's computed style tell you when to insert newlines.</p> <p>这篇关于从 HTML 中提取文本，同时保留块级元素换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2702839');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="从HTML中提取文本，同时保留块级元素换行符" href="/864640.html"> 从HTML中提取文本，同时保留块级元素换行符; </a> </li> <li> <a target="_blank" title="CSS块级元素和换行符" href="/1075150.html"> CSS块级元素和换行符; </a> </li> <li> <a target="_blank" title="删除HTML实体，同时用JSoup保留换行符" href="/864200.html"> 删除HTML实体，同时用JSoup保留换行符; </a> </li> <li> <a target="_blank" title="Jinja呈现HTML保留换行符的文本" href="/2085045.html"> Jinja呈现HTML保留换行符的文本; </a> </li> <li> <a target="_blank" title="将文本框文本写入文件，同时保留换行符" href="/2419737.html"> 将文本框文本写入文件，同时保留换行符; </a> </li> <li> <a target="_blank" title="Jinja 在保留换行符的 HTML 中渲染文本" href="/2669128.html"> Jinja 在保留换行符的 HTML 中渲染文本; </a> </li> <li> <a target="_blank" title="从textarea获取文本时如何保留换行符？" href="/868300.html"> 从textarea获取文本时如何保留换行符？; </a> </li> <li> <a target="_blank" title="如何从HTML页面中提取文本块？" href="/877491.html"> 如何从HTML页面中提取文本块？; </a> </li> <li> <a target="_blank" title="如何保留换行符" href="/1813198.html"> 如何保留换行符; </a> </li> <li> <a target="_blank" title="捕获通用换行符但保留原始换行符" href="/2422552.html"> 捕获通用换行符但保留原始换行符; </a> </li> <li> <a target="_blank" title="在HTML中保留换行符但包装文本：可能吗？" href="/863653.html"> 在HTML中保留换行符但包装文本：可能吗？; </a> </li> <li> <a target="_blank" title="在 HTML 中保留换行符但换行:可能吗?" href="/2714730.html"> 在 HTML 中保留换行符但换行:可能吗?; </a> </li> <li> <a target="_blank" title="保留HTML，JAVA，Spring中的换行符" href="/873078.html"> 保留HTML，JAVA，Spring中的换行符; </a> </li> <li> <a target="_blank" title="如何保留换行符，但有文本对齐：justify？" href="/873866.html"> 如何保留换行符，但有文本对齐：justify？; </a> </li> <li> <a target="_blank" title="保留文本区域中的换行符" href="/2896276.html"> 保留文本区域中的换行符; </a> </li> <li> <a target="_blank" title="HTML元素属性之间的换行符？" href="/872670.html"> HTML元素属性之间的换行符？; </a> </li> <li> <a target="_blank" title="复制按钮保留换行符" href="/1012235.html"> 复制按钮保留换行符; </a> </li> <li> <a target="_blank" title="保留换行符txt php" href="/1826053.html"> 保留换行符txt php; </a> </li> <li> <a target="_blank" title="在BeautifulSoup中使用换行符提取文本" href="/1968617.html"> 在BeautifulSoup中使用换行符提取文本; </a> </li> <li> <a target="_blank" title="WPF 文本块，文本属性中的换行符" href="/2437183.html"> WPF 文本块，文本属性中的换行符; </a> </li> <li> <a target="_blank" title="从Textarea读取时不保留换行符" href="/1516973.html"> 从Textarea读取时不保留换行符; </a> </li> <li> <a target="_blank" title="与换行符纲领性文本块入口" href="/440965.html"> 与换行符纲领性文本块入口; </a> </li> <li> <a target="_blank" title="将 HTML 转换为纯文本同时保留换行符(使用 JavaScript)的最便捷方法是什么?" href="/2702785.html"> 将 HTML 转换为纯文本同时保留换行符(使用 JavaScript)的最便捷方法是什么?; </a> </li> <li> <a target="_blank" title="将HTML转换为纯文本同时保留换行符（使用JavaScript）最方便的方法是什么？" href="/862750.html"> 将HTML转换为纯文本同时保留换行符（使用JavaScript）最方便的方法是什么？; </a> </li> <li> <a target="_blank" title="降价是否应该在块引用中保留换行符?" href="/2296278.html"> 降价是否应该在块引用中保留换行符?; </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>前端开发最新文章</h5> <ul> <li> <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html"> 为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？; </a> </li> <li> <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html"> 错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接; </a> </li> <li> <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html"> 如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？; </a> </li> <li> <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html"> 如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？; </a> </li> <li> <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html"> 警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件; </a> </li> <li> <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html"> 如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？; </a> </li> <li> <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html"> 此请求已被阻止;内容必须通过HTTPS提供; </a> </li> <li> <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html"> 资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）; </a> </li> <li> <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html"> 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点; </a> </li> <li> <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html"> 拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = '从,html,中,提取,文本,同时,保留,块,级,元素,换行符'; var cat = 'cc';';//qianduan</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接： <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section>  <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>