如何在Node.js中替换/注入文本中的HTML标签？

Question

我在React JS项目中有一个组件，用于显示一些文本。文本变量的类型是字符串，并且其中包含一些制表符转义字符。我想用div替换这个制表符，以便在渲染HTML时，在渲染输出div时能在span标签内看到。因此，在浏览器的页面源代码中，我希望看到像这样的内容 => <span> once upon a time, <div> there was a man <div> who had a house. </span>

文本 = "once upon a time, \t there was a man \t who had a house." ;

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

- ozil

---

当你说“tab”时，你是指带有“more text”文本的div吗？ - Jose Rojas

@JoseRojas - 在字符串文本中有这些转义制表符"\t"，我想用实际的HTML div (<div>)替换它们。 - ozil

Answer 1

您可以通过\t分隔您的text，并为每个分隔渲染一个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是当前迭代的字符串。

- SomoKRoceS

---

非常感谢。这个可行。我遇到的一个小问题是，在一些示例中，我有多个制表符转义字符，而不是像这样只有一个 "\t\t\t"，不知道是否有一种方法可以用一个 div 替换它。 - ozil

多个制表符会导致列表中出现一些空字符串元素。因此，在映射之前，您可以过滤掉不为空的字符串。像这样：text.split('\t').filter(s=>s!=='').map(s=><div>{s}</div>) - SomoKRoceS

非常感谢。我很抱歉，但我卡在这里了。看起来text.split('\t').map(s=><div>{s}</div>)返回的是一个数组，而不是一个字符串，对吗？如果可能的话，我该如何将其转换为字符串，以便我可以将其分配给字符串类型。我在这里使用TypeScript，所以它不允许我这样做。 - ozil

嗯...你可以以某种方式使用join。但我不确定为什么你需要那个字符串（它不会呈现为divs，在ReactJS中呈现元素到DOM的方法是呈现ReactElements）。如果你确定有必要，我也会尝试给你提供 :) - SomoKRoceS

Answer 2

嗨，Ozil，

请尝试使用此代码片段，看看是否可以达到您的目标！朋友，请告诉我们您的结果！

const domEl = document.getElementById("container");
ReactDOM.render(<RemoveTabs />,domEl);

function RemoveTabs() {
let text ="Once upon a time, \t there was a man \t who had a house.";
return(<div>{"<div>"+text.replace(/\t/g,'</div><div>')+"<div>"}</div>);
}

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

- Alvison Hunter

---

谢谢。我是JS的新手，所以这只是正则表达式匹配，对吧？我知道正则表达式是一种独立的东西，而JavaScript也实现了它？ - ozil

别担心，我们在这里帮忙，是的，这是一个正则表达式（RegEx），它不仅可以独立工作，而且您还可以将其集成到大多数语言中，包括现代语言，通过使用与一些RegEx字符相结合的模式以及此模块的方法（如exec、test、match、matchAll、replace、replaceAll、search、split等），在大多数情况下真正加快了字符串操作和验证过程，请查看此链接shorturl.at/fCUY9，开始进入神奇的RegEx世界。干杯，伙计们！ - Alvison Hunter