[英]Removing html tags from string in React
我正在嘗試從字符串中刪除標簽,但使用正則表達式保持順序不變。 我的字符串是這個
<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>
到目前為止我嘗試過的是
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);
}, []);
我得到的是這個
一般電源 這包含一些信息。 :在終端啟用總線。 Name Terminal enable bus name Switch Bus no ip domain-lookup ip domain name region.google.com !
我想要的順序是:
通用電源
這包含一些信息。
!
使能夠
公共汽車在
終端:名稱終端
啟用總線名稱 Switch Bus
沒有 ip 域查找
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);
}, []);
到目前為止,這是我嘗試過的
DOMParser 與檢索所有文本節點的方法相結合會更合適。 而不是為此使用效果掛鈎,考慮將 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.