JSFiddle - React, Tailwind, and code Playground
HTML
<div class="ui main text container">
<form class="ui search form" name="search" >
<div class="ui search segment">
<div class="ui fluid action input">
<input type="text" name="query" placeholder="Запрос...">
<button type="submit" class="ui search teal button">Поиск</button>
</div>
</div>
</form>
<div class="ui result segment transition hidden" id="result">
<div class="ui relaxed divided items"></div>
</div>
</div>
JavaScript
const noBreakspaceHandler = (text) => {
try {
return text.replace(new RegExp(String.fromCharCode(160),'g'),' ').replace(new RegExp('\\xa0','g'),' ')
} catch (e) {
return text
}
};
function getResult(query) {
if (txt.includes(query)) {
const resultList = document.querySelector('#result > .items');
resultList.innerHTML = '';
let template = `<div class="item">
<div class="content">
<a class="header"></a>
<div class="meta">
<p>Отчет</p>
</div>
<div class="description">
${noBreakspaceHandler(txt)}
</div>
</div>
<div class="ui image">
<i class="file alternate outline icon"></i>
</div>
</div>`;
console.log( /\xa0/.test(txt) )
resultList.insertAdjacentHTML('beforeend', template);
}
};
document.forms.search.addEventListener('submit', (e) => {
e.preventDefault();
const data = Object.fromEntries(new FormData(e.target).entries());
if (!data.query) return;
getResult( data.query );
});
const txt = '<td colspan="1" class="confluenceTd"><p style="">показатель сравнивающий текущий и прошлый период исключая объекты (магазины) отсутствующие в одном из периодов. Данный показатель позволяет оценить динамику изменений основного бизнеса без учета органического роста (открытия магазинов).</p><p style="">Анализ сопоставимых продаж - один из важнейших методов анализа продаж в розничной торговли.</p><p style="">Показатель\xa0Like for Like<span>\xa0</span>отражает на сколько результаты текущего года изменились от относительно прошлого года, а также позволяет выявить причины данных изменений. Метод показателя основан на том, что при расчете исключаются все объекты (магазины), которые не имеют результатов в одном из периодов - показатель рассчитывается только по магазинам имеющим продажи в течении текущего и прошлого периодов.</p><p style="">Исключения из расчетов:</p><ol style=""><li>новые магазины, открытые в текущем году</li><li>закрытые магазины в одном из периодов</li><li>магазины закрытые на реконструкцию в одном из...