在 details 元素中使用 span 元素答案

【问题标题】：Use span element inside a details element在 details 元素中使用 span 元素
【发布时间】：2020-09-06 16:47:27
【问题描述】：

我想使用 span 元素突出显示 html 详细信息标签正文中的一个单词，如下所示：

（高亮的类只不过是一个有背景色的类）

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

但作为交换，我在浏览器中获得了此标签的原始文本。那么如何突出显示此标签中的某些单词呢？

编辑：通过原始文本，我的意思是类似于下面的图片：

编辑 2：我正在使用 javascript 制作详细信息标签正文。

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;
}

【问题讨论】：

.highlighted {background:yellow}works，这里有什么问题？
您看到的内容是由于对 HTML 标签进行了清理，可能是您正在使用的模板系统。
那你需要出示那段代码。
所以也给你的 javascript，它会解释为什么会发生这种情况
没有足够的代码。您需要展示如何创建和处理item.content 的整个过程。如果你这样做 console.log(content) 我很确定它会显示 &lt;span&gt; 而不是标签。

标签： javascript html css

【解决方案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>

【讨论】：