主页 / 问题 / 1595438
Accepted
Bemfes
Asked:2024-10-02 02:42:51 +0000 UTC2024-10-02 02:42:51 +0000 UTC

使用正则表达式将文本中相同但字母大小写不同的标签包裹在单词中

  • 772

有一个输入，当你输入一个在文本中多次出现的单词或字母时，这些重复的部分会用mark标签突出显示。我使用正则表达式找到相同的单词，然后使用 Replace() 方法替换它们。但是，在这种情况下，所有字母都会变小，因为输入中的字母已被替换。因此，所有重复的大写字母（或以大写字母开头的相同单词）将被替换为相同的字母，但小写。如何确保替换后字母的大小写与原始大小写相对应？

const text = document.querySelector('.text');

const input = document.querySelector('.input');

input.addEventListener('input', () => {
    let value = input.value
    words(text, value)
    
})

function words(text, search) {
    let words = text.textContent
    if (words.indexOf(`${search}`) != -1 && search != '' && search != ' ') {
        let searchAll = new RegExp(search, 'gi')
        let newText = words.replace(searchAll, '<mark>' + search + '</mark>')
        text.innerHTML = newText
    } else {
         console.log('did not find');
    }
}
javascript

1 个回答

  1. Best Answer

    为什么indexOf，当有test？我觉得这个地方有问题。

    const text = document.querySelector('.text');
const input = document.querySelector('.input');

input.addEventListener('input', words);

function words() {
  let search = this.value;
  let newText = text.textContent;
  let rExp = new RegExp(`(${search})`, 'gi');
  if (rExp.test(`${newText}`) && search) {
    text.innerHTML = newText.replace(rExp, '<mark>$1</mark>');
  } else {
    console.log('did not find');
    text.innerHTML = newText;
  }
}
    <input class="input">
<p class="text">Есть инпут, при вводе какого-то слова или буквы, которые встречаются несколько раз в тексте, эти повторения будут выделены тегом mark. Я нахожу одинаковые слова с помощью регулярного выражения, а потом заменяю их с помощью метода replace().</p>

    • 2

相关问题