javascript - 如何在 Node 中的文本中替换/注入(inject) html 标签？

Question

我在 React js 项目中有一个显示一些文本的组件。文本变量是字符串类型，其中有一些制表符转义字符。我想替换此制表符并使用 div 。我该如何将其替换为这样当它呈现时，它会在呈现 HTML 时输出 div。所以在浏览器的页面源代码中，我看到类似这样的内容 => <span> once upon a time, <div> there was a man <div> who had a house. </span>

text = "从前，\t 有一个人\t 有房子。";

class somcomponent extends React.Component {
  render() {
    return <span> {text}</span>;
  }
}

Answer 1

你可以拆分你的 text通过 \t并呈现 div每次分割，像这样:

class somcomponent extends React.Component {
  render() {
    return <span>
      {text.split('\t').map(s=><div>{s}</div>)}
    </span>
  }
}

在一个片段中:

const rootElement = document.getElementById("root");
ReactDOM.render(
    <Demo />,
  rootElement
);


function Demo() {

  let text = "once upon a time, \t there was a man \t who had a house." ;
  
  return (
    <span>
      {text.split('\t').map(s=><div>{s}</div>)}
    </span>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

text.split('\t')会将您的文本拆分为介于“\t”之间的字符串列表。

现在，使用 map呈现 <div>{s}</div>对于该列表中的每个元素，s是您正在迭代的当前字符串。