Fix: text highlight issue on search (#1850)

This commit is contained in:
Shailesh Parmar 2021-12-20 14:47:10 +05:30 committed by GitHub
parent eda7222c9e
commit b6d585fe51
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 15 deletions

View File

@ -62,22 +62,15 @@ const SearchedData: React.FC<SearchedDataProp> = ({
const highlightSearchResult = () => {
return data.map((table, index) => {
let tDesc = table.description;
const highLightedTexts = !isEmpty(table.highlight?.description)
? table.highlight?.description.join(' ') || ''
: '';
const highlightTxtMatch = highLightedTexts.match(
/<span(.*?)>(.*?)<\/span>/g
);
if (highlightTxtMatch) {
const matchTextArr = highlightTxtMatch.map((val) =>
const highLightedTexts = table.highlight?.description || [];
if (highLightedTexts) {
const matchTextArr = highLightedTexts.map((val) =>
val.replace(/<\/?span(.*?)>/g, '')
);
matchTextArr.forEach((text) => {
const regEx = new RegExp(`\\b${text}\\b`, 'g');
tDesc = tDesc.replace(
regEx,
`<span class="text-highlighter">${text}</span>`
);
matchTextArr.forEach((text, i) => {
tDesc = tDesc.replace(text, highLightedTexts[i]);
});
}

View File

@ -706,7 +706,7 @@ a:focus {
.text-highlighter {
background-color: #ffc34e40;
padding: 0.25rem;
padding: 0 0.25rem;
}
body .profiler-graph .recharts-active-dot circle {