我正在嘗試創建一個接受 2 個字串的函式：
- 標題：“Lorem ipsum dolor sit amet”，
- itle_highlighted：“ipsum amet”，
并回傳一個包含所有單詞的字串或陣列title，另外在字串中定義的單詞title_highlighted將具有特定屬性并替換它們在title.
最終結果應該是這樣的：<h1>Lorem<span style={{color: "orange"}}>impsum</span>dolor sit<span style={{color: "orange"}}>amet</span>/h1>
輸出示例
到目前為止我的方法：
const highlightHeading = (title, title_highlighted) => {
const title_arr = title.trim().split(/\s /);
const title_highlighted_arr = title_highlighted.trim().split(/\s /);
for (const element1 of title_arr) {
console.log(element1);
for (const element2 of title_highlighted_arr) {
if (element1 === element2) {
const highlighted = `<span style={{ color: "orange" }}>${element1}</span>`;
console.log(highlighted);
}
}
}
};
highlightHeading("Lorem ipsum dolor sit amet", "ipsum amet");
提前致謝。
uj5u.com熱心網友回復：
您可以創建一個<HighlightedHeading>接受color、title和的組件words。
const { useMemo, useState } = React;
const tokenize = (str, delim = /\s /) => str.trim().split(delim);
const toWordArray = (words) => {
if (Array.isArray(words)) return words;
if (typeof words === 'string') return tokenize(words);
return []; // or throw Error
};
const toWordSet = (words) =>
new Set(toWordArray(words).map(word => word.toLowerCase()));
const HighlightedHeading = (props) => {
const { color, title, words } = props;
const wordSet = useMemo(() => toWordSet(words), [words]);
return (
<h2 className="highlighted-text">
{tokenize(title).map((token) => (
<React.Fragment>
{wordSet.has(token)
? <span style={{ color }}>{token}</span>
: token}
{/* Add spaces for copy-paste */}
{' '}
</React.Fragment>
))}
</h2>
);
};
const App = () => {
return (
<div>
<HighlightedHeading
color="yellow"
title="Lorem ipsum dolor sit amet"
words="ipsum amet"
/>
</div>
);
};
ReactDOM
.createRoot(document.getElementById("root"))
.render(<App title="Example using Hooks:" />);*, *::before, *::after {
box-sizing: border-box;
}
html, body, #root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#root {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #222;
color: #FFF;
}
.highlighted-text {
display: flex;
gap: 0.5ch; /* Display spaces in HTML */
margin: 0;
}<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>uj5u.com熱心網友回復：
樸素的拆分方法不考慮標點符號（例如Lorem ipsum? Dolor amet!）。您可以嘗試使用帶有單詞邊界的正則運算式\b：
title = "Lorem ipsum dolor sit amet"
keywords = ["ipsum", "amet"]
regex = new RegExp('\\b(' keywords.join('|') ')\\b', 'g')
result = title.replace(regex, '<span whatever>$&</span>')
console.log(result)轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/535064.html