如何在节点中的文本中替换/注入html标签？

Posted 2023-03-05

【中文标题】如何在节点中的文本中替换/注入html标签？

【英文标题】：How to replace/inject html tags in a text in node?

【发布时间】：2021-03-21 07:05:12

【问题描述】：

我在 react js 项目中有一个组件，它显示一些文本。 text 变量是字符串类型，其中包含一些制表符转义字符。我想替换这个制表符并使用 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>;
  

【问题讨论】：

当你说tab时，你指的是带有'more text'的div作为文本？

@JoseRojas - 在字符串文本中有这些转义的制表符“\t”，我想用实际的 html div ( ) 替换它们

【参考方案1】：

你好厄齐尔，

继续尝试这个 sn-p，看看这是否是您想要实现的目标，伙计！让我们知道你的结果！

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>

【讨论】：

谢谢。我是 js 新手，所以这只是正则表达式匹配吗？我知道正则表达式是它自己的东西，javascript 也实现了它？

不用担心，我们随时为您提供帮助，是的，这是一个正则表达式 (RegEx)，它不仅可以单独工作，而且您还可以集成到包括现代语言在内的大多数语言以提供帮助在解决问题的过程中，使用与一些正则表达式字符相结合的模式，并借助该模块的方法，如 exec、test、match、matchAll、replace、replaceAll、search、split 等，真正加快了字符串操作和验证在大多数情况下，请查看此链接 shorturl.at/fCUY9 以开始使用 RegEx 的神奇世界。干杯，伙计们！

【参考方案2】：

您可以将text 拆分为\t，并在每个拆分后渲染一个div，如下所示：

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

在sn-p中：

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 是您正在迭代的当前字符串。

【讨论】：

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

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

非常感谢。我为此提前道歉，但我被困在这里。看起来像 text.split('\t').map(s=>s) 这返回一个数组，而不是一个字符串，对吧？如果可能的话，我如何将其转换为字符串，以便我可以将其分配给字符串类型。我在这里使用打字稿，所以它不允许我分配它。

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