Ищите и заменяйте строки без использования Regex, но вместо этого зацикливайтесь, как я могу заменить более одного слова одновременно? - PullRequest
Новая
       60

Ищите и заменяйте строки без использования Regex, но вместо этого зацикливайтесь, как я могу заменить более одного слова одновременно?

1 голос
/ 28 февраля 2020

Я нашел способ выполнять поиск и замену строк без использования Regex, но когда я хочу заменить более одного экземпляра, он делает это по одному вместо всех экземпляров одновременно. Как мне заставить l oop работать? 

'use strict'

function main() {
  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('replace').addEventListener('click', replace);
    document.getElementById('replaceAll').addEventListener('click', replaceAll);
  });

}

function replace(evnt) {
  evnt.preventDefault()
  let userText = document.getElementById('input').value;
  let search = document.getElementById('search').value;
  let replaceText = document.getElementById('replaceText').value;
  let caseSensitive = document.getElementById('case').checked;
  document.getElementById('input').value = userText.replace(search, replaceText);

}

function replaceAll(evnt) {
  evnt.preventDefault();
  let userText = document.getElementById('input').value;
  let search = document.getElementById('search').value;
  let replaceText = document.getElementById('replaceText').value;

  for (let r = 0; r < userText.indexOf(search); r++) {
    document.getElementById('input').value = userText.replace(search, replaceText);
    console.log(r);

  }
}
<form id="form">
  <div>
    <textarea id="input" row="10" cols="50" placeholder="Enter text here"></textarea>
  </div>
  <div>
    <input type="text" id="search" name="search">
    <input type="text" id="replaceText" name="replacebox">
  </div>
  <div>
    <input type="checkbox" id="case" name="case sensitivity" />
    <label for="uppercase">case sensitivity</label>
  </div>
  <div>
    <button type="submit" id="replace">Replace</button>
  </div>
  <div>
    <button type="submit" id="replaceAll">Replace all</button>
  </div>
</form>

1 Ответ

1 голос
/ 28 февраля 2020

In 

for(let r = 0; r < userText.indexOf(search);r++) {
    document.getElementById('input').value = userText.replace(search, replaceText);
}

На каждой итерации вы берете строку userText и заменяете одну подстроку внутри нее. Вы не берете замененную строку из предыдущей итерации; вы берете оригинальную строку, поэтому, в конце концов, будет сделано не более одной замены.

Вместо этого переназначьте переменную, возможно userText, затем назначить на вход после выполнения l oop: 

for(let r = 0; r < userText.indexOf(search);r++) {
    userText = userText.replace(search, replaceText);
}
document.getElementById('input').value = userText;

Можно также использовать .includes, это более интуитивно понятно: 

while (userText.includes(search)) {
  userText = userText.replace(search, replaceText);
}


'use strict'

function main() {
  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('replace').addEventListener('click', replace);
    document.getElementById('replaceAll').addEventListener('click', replaceAll);
  });

}

function replace(evnt) {
  evnt.preventDefault()
  let userText = document.getElementById('input').value;
  let search = document.getElementById('search').value;
  let replaceText = document.getElementById('replaceText').value;
  let caseSensitive = document.getElementById('case').checked;
  document.getElementById('input').value = userText.replace(search, replaceText);

}

function replaceAll(evnt) {
  evnt.preventDefault();
  let userText = document.getElementById('input').value;
  let replaceText = document.getElementById('replaceText').value;
  while (userText.includes(search.value)) {
    userText = userText.replace(search.value, replaceText);
  }
  input.value = userText;
}
const [repButton, repAllButton] = document.querySelectorAll('button');
repButton.onclick = replace;
repAllButton.onclick = replaceAll;
<form id="form">
  <div>
    <textarea id="input" row="10" cols="50" placeholder="Enter text here">abcabc</textarea>
  </div>
  <div>
    <input type="text" id="search" name="search" value="abc">
    <input type="text" id="replaceText" name="replacebox" value="123">
  </div>
  <div>
    <input type="checkbox" id="case" name="case sensitivity" />
    <label for="uppercase">case sensitivity</label>
  </div>
  <div>
    <button type="submit" id="replace">Replace</button>
  </div>
  <div>
    <button type="submit" id="replaceAll">Replace all</button>
  </div>
</form>
...