使用Javascript在同一页面的多个文本区域突出显示特定单词

Question

我想突出显示用10写的特定单词(例如-绿色和蓝色(。我发现了一个Javascript代码，它突出显示了在a，p，button etx中页面上任何地方写的单词。但该代码并没有突出显示文本区域中所写的单词。我找到的代码是-

'<p>Hello world lorem ipsum dolor sit amet, consectetur adipisicing 
elit. Est vel accusantium 
totam, ipsum delectus et dignissimos mollitia!</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, corporis.
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem voluptas 
perferendis dolores ducimus velit error voluptatem, qui rerum modi? this is amet in the 
wall</small>
</p>
<textarea>hello amet this</textarea>
<style>
.highlight {
background: lightpink;
}
</style>
<script>
function highlight(elem, keywords, caseSensitive = false, cls = 'highlight') {
const flags = caseSensitive ? 'gi' : 'g';
keywords.sort((a, b) => b.length - a.length);
Array.from(elem.childNodes).forEach(child => {
const keywordRegex = RegExp(keywords.join('|'), flags);
if (child.nodeType !== 3) {
highlight(child, keywords, caseSensitive, cls);
} else if (keywordRegex.test(child.textContent)) {
const frag = document.createDocumentFragment();
let lastIdx = 0;
child.textContent.replace(keywordRegex, (match, idx) => {
const part = document.createTextNode(child.textContent.slice(lastIdx, idx));
const highlighted = document.createElement('span');
highlighted.textContent = match;
highlighted.classList.add(cls);
frag.appendChild(part);
frag.appendChild(highlighted);
lastIdx = idx + match.length;
});
const end = document.createTextNode(child.textContent.slice(lastIdx));
frag.appendChild(end);
child.parentNode.replaceChild(frag, child);
}
});
}
highlight(document.body, ['lorem', 'amet', 'autem']);
</script>

'

Answer 1

不能在textarea中使用标记span，可以在div上使用contenteditable="true"而不是textarea。

这篇帖子可能有用。

Answer 2

不能在<textarea>中插入标记
但是，如果您将<div>、<p>或<span>与contenteditable="true"属性放在一起，它将看起来像<textarea>
那就行了

这里有一个例子：

div {
width: 100%;
height: 500px;
}

<div contenteditable="true">Write some text here!<br><br>If you think that this is a &lt;textarea&gt;, then you're completely <span style="color: red;">FALSE!</span></div>

因此，您的代码将是：

function highlight(elem, keywords, caseSensitive = false, cls = 'highlight') {
const flags = caseSensitive ? 'gi' : 'g';
keywords.sort((a, b) => b.length - a.length);
Array.from(elem.childNodes).forEach(child => {
const keywordRegex = RegExp(keywords.join('|'), flags);
if (child.nodeType !== 3) {
highlight(child, keywords, caseSensitive, cls);
} else if (keywordRegex.test(child.textContent)) {
const frag = document.createDocumentFragment();
let lastIdx = 0;
child.textContent.replace(keywordRegex, (match, idx) => {
const part = document.createTextNode(child.textContent.slice(lastIdx, idx));
const highlighted = document.createElement('span');
highlighted.textContent = match;
highlighted.classList.add(cls);
frag.appendChild(part);
frag.appendChild(highlighted);
lastIdx = idx + match.length;
});
const end = document.createTextNode(child.textContent.slice(lastIdx));
frag.appendChild(end);
child.parentNode.replaceChild(frag, child);
}
});
}
highlight(document.body, ['lorem', 'amet', 'autem']);

.highlight {
background: lightpink;
}

<p>Hello world lorem ipsum dolor sit amet, consectetur adipisicing 
elit. Est vel accusantium 
totam, ipsum delectus et dignissimos mollitia!</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, corporis.
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem voluptas 
perferendis dolores ducimus velit error voluptatem, qui rerum modi? this is amet in the 
wall</small>
</p>
<div contenteditable="true">hello amet this</div>

下面是现场演示：https://codepen.io/marchmello/pen/OJybjwN