Question

如何突出显示仅单词，这些单词在用户提供的输入中是无效的，我可以使我的自定义无效检查功能生效。例如你好，这非常好。假设这是用户输入的内容，并且假设我要突出显示“非常”和“此”或其他任何自定义字词。

我尝试将html标记放在值内，但是html不会解析输入标记的value属性内。

Answer 1

尝试在读取输入内容时使用 variable.split（）。使用循环将其存储在数组中，并检查错误并突出显示

Answer 2

您不能简单地将html标记放入输入中。要启用“富文本”功能，您必须像这样使用contenteditable HTML attribute ...

const words = [/(very)/gi, /(nice)/gi]
const highlightInput = () => {
	const richInput = document.getElementById('rich-input')
	let text = richInput.innerText

	words.forEach(x => {
		text = text.replace(x, '<span class="highlighted">$1</span>')
	})
	
	richInput.innerHTML = text
}

document.getElementById('highlight').addEventListener('click', highlightInput)

#rich-input{
  border:1px solid #000;
  padding: 5px;
}

.highlighted{
  color:red;
  text-decoration:underline;
}

<div>
  <input type="button" value="Highlight!" id="highlight" />
</div>

<label>Enter your text below:</label>
<div id="rich-input" contenteditable="true">Hello this is very good and very nice</div>

如何突出显示用户输入的无效单词

2 个答案: