Как выделить искомый запрос в результатах поиска
Здравствуйте.
Хочу выделить искомый запрос в результатах поиска жирным шрифтом. На данный момент написал:
<script>
document.addEventListener("DOMContentLoaded", () => {
let searchinput = document.querySelector('#searchinput').value;
let fullpage = document.querySelector('#fullpage').toString();
// fullpage.replace(searchinput, '<b>'+searchinput+'</b>');
fullpage.split(searchinput).join('<b>'+searchinput+'</b>');
});
</script>
Подскажите что я делаю не так? В консоли ошибок нет. Почему запрос в найденных результатах не выделяется? |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
WebMachine,
не могу помочь, но я говорил про что-то такое out.innerHTML = fullpage.replace(searchinput, '<b>'+searchinput+'</b>'); |
Цитата:
|
Цитата:
document.addEventListener("DOMContentLoaded", () => {
let searchinput = document.querySelector('#searchinput').value;
let newValue = '<b>' +searchinput+ '</b>';
const elements = document.querySelectorAll('p.fullpage');
elements.forEach((element) => {
element.innerHTML = element.textContent.replace(searchinput, newValue);
});
});
|
Цитата:
|
Цитата:
document.addEventListener("DOMContentLoaded", () => {
let searchinput = document.querySelector('#searchinput').value;
let newValue = '<b>' +searchinput+ '</b>';
const elements = document.querySelectorAll('.fulldesc');
elements.forEach((element) => {
element.innerHTML = element.textContent.replaceAll(searchinput, newValue);
});
});
с этим: https://javascript.ru/forum/dom-wind...zav-konec.html |
WebMachine,
let newValue = '<b>' +searchinput+ '</b>'; вместо этого должен быть regexp, надо искать по форуму, было 100500 раз. |
WebMachine,
при условии что в искомом тексте нет тегов!!!
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener("DOMContentLoaded", () => {
let searchinput = document.querySelector('#searchinput').value;
const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
const createRegExp = str => new RegExp('(^|\\s+)(' +escapeRegExp(str) + '[a-zа-яё]*)','gim');
let reg = createRegExp(searchinput); console.log(reg)
const elements = document.querySelectorAll('p.fullpage');
elements.forEach((element) => {
element.innerHTML = element.textContent.replace(reg, '<b>$1$2<\/b>');
});
});
</script>
</head>
<body>
<input type="text" id="searchinput" value="ipsum">
<p class="fullpage">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti dignissimos omnis totam qui veritatis sunt laboriosam. Qui excepturi similique necessitatibus! Explicabo cum eius error facilis accusantium perferendis, voluptatibus rem, quas repudiandae
quia obcaecati laborum alias a pariatur beatae dicta dolorum voluptas molestias recusandae dolores. Repellendus eligendi facere adipisci vel placeat id porro nisi, quisquam delectus aspernatur amet omnis perspiciatis sed similique. Impedit, ipsum!
Voluptatum maxime sed fugit dolore nostrum. Facere nemo quam nesciunt necessitatibus officiis cumque aut itaque fugiat recusandae? Quos tempora laudantium autem natus, aut dicta ipsa, ab fugiat, voluptate voluptatem aliquid. Earum voluptates,
est ad possimus esse ducimus ipsum!</p>
</body>
</html>
|
Цитата:
Но надо ограничить без метода: {short-story limit="250"}, чтобы данное слово было посередине 250 символов и выделено жирным шрифтом. Это последняя просьба Рони и с меня на пиво и чипсы! |
Это всё такое говно, что говно-говно. Поломать страницу можно на раз-два.
Всё это делаться должно совершенно иначе - через Range\Selectoin и с очень-очень аккуратным отношением к нодам, а не innerHTML поверх textContent. |
WebMachine,
пас, но на всякий случай для медитации Цитата:
|
Цитата:
|
Помогите хоть кто нибудь. Я заплачу 1000 руб !!! лижбы решить.
|
В общем этот вариант подсвечивает все слова найденные на странице результатов поиска:
<script>
document.addEventListener("DOMContentLoaded", () => {
let searchinput = document.querySelector('#searchinput').value;
let newValue = '<b>' +searchinput+ '</b>';
const elements = document.querySelectorAll('.fulldesc');
elements.forEach((element) => {
element.innerHTML = element.textContent.replaceAll(searchinput, newValue);
});
});
</script>
Но осталось как то решить задачу чтобы выводился именно тот кусок описания в котором есть данное словосочетание. |
Цитата:
|
| Часовой пояс GMT +3, время: 11:51. |