用js做在输入框输入正则表达式能够根据输入的正则表达式在文字框搜索并且标明出对应的文字用\g全局匹配replace替换
时间: 2023-06-20 10:09:44 浏览: 174
可以使用JavaScript中的正则表达式和字符串方法来实现这个功能。首先,我们需要获取输入框中的正则表达式和文字框中的文本。然后,我们可以使用正则表达式的`test()`方法来检查文本中是否存在匹配。如果存在匹配,我们可以使用字符串的`replace()`方法来进行替换。
下面是一个示例代码:
HTML:
```html
<input type="text" id="regex-input" placeholder="输入正则表达式">
<textarea id="text-area" rows="10"></textarea>
```
JavaScript:
```javascript
const regexInput = document.getElementById('regex-input');
const textArea = document.getElementById('text-area');
// 监听输入框的输入事件
regexInput.addEventListener('input', () => {
const regex = new RegExp(regexInput.value, 'g');
const text = textArea.value;
// 使用正则表达式的test方法检查文本中是否存在匹配
if (regex.test(text)) {
// 使用replace方法进行替换,并在匹配的文本前后添加标记
const replacedText = text.replace(regex, '<mark>$&</mark>');
textArea.innerHTML = replacedText;
} else {
textArea.innerHTML = text;
}
});
```
这个代码中,我们首先获取了输入框和文字框的DOM元素,并监听了输入框的输入事件。在事件回调函数中,我们根据输入框中的正则表达式创建了一个正则表达式对象,并获取了文字框中的文本。然后,我们使用正则表达式的`test()`方法检查文本中是否存在匹配。如果存在匹配,我们使用字符串的`replace()`方法进行替换,并在匹配的文本前后添加了`<mark>`标签,以便于用户更清晰地看到匹配的位置。最后,我们将替换后的文本设置回文字框中。如果没有匹配,我们直接将原始文本设置回文字框中。
阅读全文