在 React 中解析 Html 字符串答案

【问题标题】：Parse Html string in React在 React 中解析 Html 字符串
【发布时间】：2019-12-17 11:52:22
【问题描述】：

我有来自后端的大 html 字符串并试图从中提取一些值：

<div class="main">

  <div class="teaser">
    <div class="web-text">
      <p>taser text taser text taser text taser text taser text taser text taser text taser text taser text</p>
    </div>
    <div class="mobile-text" style="display:none;">
      <p class="">taser text taser text taser text taser text taser text taser text taser text taser text taser text taser text </p>
    </div>
    <img __jive_id="164943" data-image-id="164943" data-source="own" data-teaserid="164943" data-teasertext="" src="https://daimler-9040.ps.jiveint.com/servlet/JiveServlet/downloadImage/102-2863-1-164943/52571303_376009123196698_8396665822503763968_o.jpg">
  </div>
  
    <div class="teaser2">
    <div class="web-text">
      <p>taser text taser text taser text taser text taser text taser text taser text taser text taser text</p>
    </div>
    <div class="mobile-text" style="display:none;">
      <p class="">taser text taser text taser text taser text taser text taser text taser text taser text taser text taser text </p>
    </div>
    <img __jive_id="164943" data-image-id="164943" data-source="own" data-teaserid="164943" data-teasertext="" src="https://daimler-9040.ps.jiveint.com/servlet/JiveServlet/downloadImage/102-2863-1-164943/52571303_376009123196698_8396665822503763968_o.jpg">
  </div>
  
  ....
  
</div>

使用 jquery 我可以这样做：

var text = $('.teaser .web-text').text();

那么有没有类似的解决方案可以使用？我见过'html-react-parser'库，但是它生成了太多的子数组，你必须遍历所有的数组并过滤它们。这就是为什么我正在寻找更轻松的方式。

【问题讨论】：

npmjs.com/package/react-innertext

标签： html reactjs html-parsing

【解决方案1】：

React 是一个 Javascript 库，这意味着常规的 Javascript 语法仍然可用。要获取特定 DOM 元素的 innerText，您只需使用 innerText (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText)。

以下是具体示例： document.getElementsByClassName('web-text')[0].firstChild.innerText

【讨论】：