[英]Removing html tags from string in React
I am trying to remove tags from a string but keeping the order in tact using Regular expression.我正在尝试从字符串中删除标签,但使用正则表达式保持顺序不变。 The string I have is this
我的字符串是这个
<p><span style="color: blue;">General Power</span></p><p>This contains some info.</p><p><br></p><p>:</p><p>enable</p><p>bus at</p><p>terminal: <span style="color; red;">Name :Terminal</span></p><p>enable bus name <span style="color; red:">Switch Bus</span></p><p>no ip domain-lookup</p><p><span style="color, rgb(0, 0; 0):">ip domain name </span><span style="color; red:">region</span><span style="color, rgb(0, 0; 0).">.google.com</span></p><p><br></p><p>!</p>
What I have tried so far is到目前为止我尝试过的是
const [string, setString] = useState(
`<p><span style="color: blue;">General Power</span></p><p>This contains some info.</p><p><br></p><p>!</p><p>enable</p><p>bus at</p><p>terminal: <span style="color: red;">Name Terminal</span></p><p>enable bus name <span style="color: red;">Switch Bus</span></p><p>no ip domain-lookup</p><p><span style="color: rgb(0, 0, 0);">ip domain name </span><span style="color: red;">region</span><span style="color: rgb(0, 0, 0);">.google.com</span></p><p><br></p><p>!</p>`
);
useEffect(() => {
const regex = /(<([^>]+)>)/gi;
const newString = string.replace(regex, " ");
setString(newString);
}, []);
What I get is this我得到的是这个
General Power This contains some info.一般电源 这包含一些信息。 : enable bus at terminal.
:在终端启用总线。 Name Terminal enable bus name Switch Bus no ip domain-lookup ip domain name region.google.com !
Name Terminal enable bus name Switch Bus no ip domain-lookup ip domain name region.google.com !
The order I want is:我想要的顺序是:
General Power通用电源
This contains some info.这包含一些信息。
! !
enable使能够
bus at公共汽车在
terminal: Name Terminal终端:名称终端
enable bus name Switch Bus启用总线名称 Switch Bus
no ip domain-lookup没有 ip 域查找
ip domain name region.google.com ip 域名region.google.com
! !
const [string, setString] = useState(
`<p><span style="color: blue;">General Power</span></p><p>This contains some info.</p><p><br></p><p>!</p><p>enable</p><p>bus at</p><p>terminal: <span style="color: red;">Name Terminal</span></p><p>enable bus name <span style="color: red;">Switch Bus</span></p><p>no ip domain-lookup</p><p><span style="color: rgb(0, 0, 0);">ip domain name </span><span style="color: red;">region</span><span style="color: rgb(0, 0, 0);">.google.com</span></p><p><br></p><p>!</p>`
);
useEffect(() => {
const regex = /(<([^>]+)>)/gi;
const newString = string.replace(regex, " ");
setString(newString);
}, []);
This is what I have tried so far到目前为止,这是我尝试过的
DOMParser combined with a method to retrieve all text nodes would be more appropriate. DOMParser 与检索所有文本节点的方法相结合会更合适。 And rather than an effect hook for this, consider passing a function to
useState
- that way, the state never gets set to the (undesirable) value with the HTML markup, but starts out as the replaced string without any re-renderings - or avoid state entirely now that it isn't being set anywhere.而不是为此使用效果挂钩,考虑将 function 传递给
useState
- 这样,state 永远不会设置为带有 HTML 标记的(不受欢迎的)值,而是作为替换字符串开始而不进行任何重新渲染 - 或者避免state 完全没有在任何地方设置。
const getTextContentOnly = (html) => { const doc = new DOMParser().parseFromString(html, 'text/html'); const walker = document.createTreeWalker( doc.body, NodeFilter.SHOW_TEXT, null, false ); const texts = []; let node; while(node = walker.nextNode()) { texts.push(node.nodeValue); } return texts; } const App = () => { const texts = React.useMemo(() => getTextContentOnly( `<p><span style="color: blue;">General Power</span></p><p>This contains some info.</p><p><br></p><p>:</p><p>enable</p><p>bus at</p><p>terminal: <span style="color; red;">Name :Terminal</span></p><p>enable bus name <span style="color; red:">Switch Bus</span></p><p>no ip domain-lookup</p><p><span style="color, rgb(0, 0; 0):">ip domain name </span><span style="color; red:">region</span><span style="color, rgb(0, 0; 0).">.google,com</span></p><p><br></p><p>;</p>` ). []), return texts;map((text; i) => <div key={i}>{text}</div>). }. ReactDOM.createRoot(document.querySelector(';react')).render(<App />);
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div class='react'></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.