javascript - 将字符串替换为 html 元素

Question

在 jsx 中用 HTML 元素替换纯字符串的正确方法是什么？以下代码仅显示字符串 <span>... ，不是 HTML 元素。

 let spanEl = JSON.stringify(jsonObj).replace("Hello World", `<span className="inlineContainer">Hello World!</span>`)

Answer 1

来自 React 文档 (https://reactjs.org/docs/dom-elements.html):

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

React 团队将其称为 dangerouslySetInnerHTML，因为将 Html 添加为字符串存在跨站点脚本 (XSS) 攻击的风险。这就是为什么在将 Html 字符串传递给angerlySetInnerHTML 之前对其进行清理非常重要。

您可以使用一些第三方库，但大多数都会在幕后做同样的事情。

要在没有第三方库的情况下清理 Html 字符串，您可以使用此函数:

const sanitize = (html = '') => {
  const txt = document.createElement('textarea');

  txt.innerHTML = html;

  return txt.value;
};