Выделите все совпадения слов в предложении текста JavaScript
Я пытаюсь выделить весь текст, соответствующий любому слову в моем поисковом тексте.
Предположить поисковый текст весь текст
Мой запрос возвращает всю запись, текст которой содержит любое слово из вышеприведенного текста (то же, что и текстовый поиск в MSSQL)
Теперь мне нужно выделить все совпадения с любым словом в поиске. Мой текущий код может выделять только полный текст.
Мой текущий код:
getHighlightedText(text, higlight) {
let parts = text.split(new RegExp(`(${higlight})`, 'gi'));
return <span> { parts.map((part, i) =>
<span key = {i} style = {part.toLowerCase() === higlight.toLowerCase() ? { color: '#93C74B' } : {} }>{part}</span>)
} </span>;
}
Заранее спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете сделать это с помощью replace, вот пример:
const getHighlightedText = (text, higlight) => {
let groups = higlight.split(" ").map(v => `(${v})`).join("|");
return "<span>" + text.replace(new RegExp(groups, "gi"), g => `<span style = "color:#93C74B">${g}</span>`) + "<span>";
}
let text = "Some text for testing";
let higlight = "TEXT testing";
document.write(getHighlightedText(text, higlight));Это сначала генерирует регулярное выражение из искомой строки, регулярное выражение со структурой (word1)|(word2)...., затем replace используется для замены всех этих слов элементами <span> с другим цветом текста. Если вы хотите узнать больше об использовании replace с функцией, вы можете сделать это ЗДЕСЬ
Это просто можно сделать методом replace:
getHighlightedText(text, higlight) {
let kws = higlight.replace(/ /g, "|");
return text.replace(new RegExp(`(${kws})`, "gi"),
'<span key = "$1" style = "color: #93C74B;">$1</span>');
}
В этой демонстрации я написал специальную функцию, которая использует динамический объект RegExp, чтобы его можно было использовать повторно. Он использует replace() и выполняет следующие функции:
Принимает 2 параметра:
1. a String that needs to be searched
2. a variable String that will be interpolated inside of a RegExp Object.
3. Every match will be wrapped in a `<mark>` tag.
Синтаксис RegExp отличается от литерала Regex, одно важное отличие заключается в том, что экранирование с помощью \ необходимо даже для мета-флагов, как и \w, необходимо экранировать следующим образом: \\w.
Демо
var str = document.querySelector('main').innerHTML;
function markText(str, qry) {
var rgx = new RegExp('\\b' + qry + '\\b', 'gi');
var res = str.replace(rgx, `<mark>${qry}</mark>`);
return res;
}
document.querySelector('main').innerHTML = markText(str, "Chuck Norris");<main>
<p>Scientists believe the world began with the "Big Bang". Chuck Norris shrugs it off as a "bad case of gas". Chuck Norris actually can get blood from a turnip...and from whatever the hell else he wants. There is no chin behind Chuck Norris' beard. There is only another fist. Someone once videotaped Chuck Norris getting pissed off. It was called Walker: Texas Chain Saw Massacre Chuck Norris doesn't wash his clothes, he disembowels them. Chuck Norris' first job was as a paperboy. There were no survivors Chuck Norris will attain statehood in 2009. His state flower will be the Magnolia. Chuck Norris can slam a revolving door If Chuck Norris kicks a tree in a forest and no one was around, he chooses who he wants to hear it.</p>
<p>If you ask Chuck Norris what time it is, he always says, "Two seconds 'til." After you ask, "Two seconds 'til what?" he roundhouse kicks you in the face. Chuck Norris is the reason why Waldo is hiding.</p>
</main>
Я использую реакцию. Функция возвращает мне html, мне нужно вернуть элемент реакции.