Блог

Главная - Вопросы по программированию - Использовать элемент span внутри элемента details

Использовать элемент span внутри элемента details

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я хочу использовать элемент span для выделения слова в теле тега html details, как показано ниже :

(выделенный класс — это не что иное, как класс с фоновым цветом)

 <details>
        <summary>58046</summary>
        Thanks <span class="highlighted">Larry</span> C.
</details>

но взамен я получаю необработанный текст для этого тега в браузере. Итак, как я могу выделить определенное слово внутри этого тега?

редактировать: под необработанным текстом я подразумеваю что-то вроде изображения ниже : введите описание изображения здесь

редактировать 2: я использую javascript для создания тела тега details.

 function showResult(results) {
    const resultElement = document.getElementById('result');
    for (const item of results) {
        const content = item.content.replaceAll()
        resultElement.innerHTML  = `<details class="card single-result">
        <summary>${item.name}</summary>
        ${content}
        </details>`;
    }
}

function highlightWords(content) {
    let newContent = content;
    for (const word of includeWordsList) {
        let regex = new RegExp(word, 'ig');
        newContent.replaceAll(regex, `<span class="highlighted">${word}</span>`);
    }
    return newContent;
}

Комментарии:

1. .highlighted {background:yellow} работает, в чем проблема?

2. То, что вы видите, вызвано чем-то, что очищает теги HTML, возможно, используемой вами системой шаблонов.

3. Затем вам нужно показать этот код.

4. поэтому также укажите свой javascriipt, он объяснит, почему это происходит

5. Недостаточно кода. Вам нужно показать весь процесс того, как item.content создается и обрабатывается. Если вы это сделаете, console.log(content) я почти уверен, что он будет отображаться amp;<spanamp;> вместо тега.

Ответ №1:

Кажется, ваш код работает нормально.

Вот пример вашего кода, который .highlighted окрашен в белый цвет и задан красным фоном:

 .highlighted {
  padding: 3px;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
  border-radius: 3px;
}

summary {
  padding-bottom: 12px;
}  
 <details>
<summary>58046</summary>
Thanks <span class="highlighted">Larry</span> C.
</details>