在javascript / ReactJS中提取来自端点的html值？答案

【问题标题】：Extract html value coming from endpoint in javascript / ReactJS?在javascript / ReactJS中提取来自端点的html值？
【发布时间】：2020-11-26 03:00:56
【问题描述】：

我在 reactJS 中遇到了一个不寻常的场景，端点正在发送一个对象。其中一个键具有字符串化 HTML 的值。

端点的结果是：

{
 "contact_columns": [
  {
    "label": "Don't have a policy yet?",
    "contactType": "URL",
    "value": "https://broker.bolttech.vn/",
    "subtextNode": {
      "childMarkdownRemark": {
        "html": "<p>Don't have a policy yet?</p>"
      }
    }
  }
]
}

我想要值“还没有策略？”从这个端点。既然是在para标签里面，那么如何把它提取出来放到一个变量里面呢。

请建议怎么做？

问候，阿琼萨

【问题讨论】：

标签： javascript html jquery reactjs

【解决方案1】：

一旦你得到想要的值，使用replace方法从字符串中删除<p>和</p>标签。

const response = {
 "contact_columns": [
  {
    "label": "Don't have a policy yet?",
    "contactType": "URL",
    "value": "https://broker.bolttech.vn/",
    "subtextNode": {
      "childMarkdownRemark": {
        "html": "<p>Don't have a policy yet?</p>"
      }
    }
  }
]
}

尝试如下访问

var htmlString = response.contact_columns[0].subtextNode.childMarkdownRemark.html.replace('<p>', '').replace('</p>', '')

【讨论】：

【解决方案2】：

在 reactjs 中你可以这样做

import React from 'react';
import { render } from 'react-dom';

const htmlString = '<h1>Hello World! ?';

const App = () => (
  <div dangerouslySetInnerHTML={{ __html: htmlString }} />
);

render(<App />, document.getElementById('root'));

这是工作代码沙箱https://codesandbox.io/s/dangerouslysetinnerhtml-forked-ntt5c?file=/index.js

【讨论】：

【解决方案3】：

快速解决方案

如果你只有一层 HTML，你可以使用类似这样的东西，那里的任何标签都将被删除。

response.contact_columns[0].subtextNode.childMarkdownRemark.html.replace(/<[^>]+>/g, '')

危险的解决方案：

const a = document.createElement("div");
a.innerHTML = response.contact_columns[0].subtextNode.childMarkdownRemark.html;

console.log(a.innerText)
// "Don't have a policy yet?"

这样你就可以忽略文本是p标签还是其他标签。

由于 XSS，尽量避免使用 dangerouslySetInnerHTML 和 createElement。如果你信任输入就使用（不要信任用户）。

【讨论】：