如何防止使用innerHTML时替换HTML元素?

Question

我根据它们的textContent匹配HTML元素。然后用<strong>标签包围匹配:

const element = [...document.querySelectorAll('a')]
.find(element => element.textContent.match('b'))

element.innerHTML = element.innerHTML.replace('b', '<strong>$&</strong>')

<a href="#">
<br>
<h3>blog</h3>
</a>

但是有一个问题。代码还匹配HTML元素。所以我得到这个:

<a href="#">
&lt;<strong>b</strong>r&gt;
<h3>blog</h3>
</a>

而不是期望的结果:

<a href="#">
<br>
<h3>blog</h3>
</a>

如何改变我的代码，使它不匹配HTML元素?只有里面的文字?

Answer 1

遍历锚的子元素，并根据元素的textContent是否包含"b"重置HTML。

注意:find只会找到你正在寻找的东西的第一个实例。您需要显式地遍历所有内容。

find()方法返回所提供的数组中第一个元素的值，该值满足所提供的测试函数。如果没有值满足测试函数，则返回undefined。

const elements = [...document.querySelectorAll('a')];
function embolden(elements, str) {
elements.forEach(element => {
[...element.children].forEach(child => {
if (child.textContent.includes('b')) {
child.innerHTML = child.textContent.replace('b', '<strong>b</strong>');
}
});
});
}
embolden(elements, 'b');

<a href="#">
<br>
<p>blog</p>
</a>
<a href="#">
<br>
<p>blog</p>
<p>Peterborough</p>
</a>

Answer 2

使用innerText代替innerHTML进行匹配。在innerHTML

中插入替换的值

const element = [...document.querySelectorAll('#example')]
.find(element => element.textContent.match('b'))

element.innerHTML = element.innerText.replace('b', '<strong>$&</strong>')

<div id="example">
<div>This is some text.</div>
<br>
<div> This is part of the body </div>
</div>

Answer 3

你可以使用这个正则表达式:/(?!<[^>]+)b(?![^<]+>)/g

const element = [...document.querySelectorAll('a')]
.find(element => element.textContent.match('b'))
const string = "b";
const reg = new RegExp("(?!<[^>]+)" + string + "(?![^<]+>)", "g");
element.innerHTML = element.innerHTML.replace(reg, '<mark>$&</mark>')

mark
{
background-color: lightgreen;
}

<a href="#">
<br>
<h3 title="attributes are not affected bbbb">blog hover blog</h3>
</a>