Замена нескольких тегов между значениями

У меня есть скрипт, который делает замены. Это работает нормально, но из-за того, что заменяемые значения расположены близко друг к другу, между значениями есть более одного
.

Это выглядит как:

<br />
Value

<br />
Value

<br />


<br />
Value

<br />
Value

<br />


<br />
Value

<br />


<br />

<br />

Моя задача — получить только один <br> между значениями:

<br />
Value

<br />
Value

<br />
Value

Поскольку вариантов в моем списке не так много, я знаю одно решение для всех доступных вариантов, но это плохой хардкод, например:

var mystring=`<br />


<br />`

for (i=0; i<mystring.length; i++){
          var regex = new RegExp(mystring[i],"g");
           mystring = mystring.replace(regex, "");
       }

Есть ли какой-нибудь элегантный способ решить мой случай? Подумываю о регулярном выражении, но мне слишком сложно его написать. Или может быть есть другой способ?

Полный пример:

  function textareadValue() {
        var mystring =``;
        mystring = document.getElementById("myTextArea").value;
        var find1 = ["DEER", "ELK", "PANDA", "THUNDERBIRD", "Text for DELETE 1", "Text for DELETE 3", "Text for DELETE 4", "Text for DELETE 5", "Text for DELETE 6", "Text for DELETE 7", "Text for DELETE 8", "Text for DELETE 9", "Text for DELETE 10"];
        var find2 = /(\d{4})/g;
        var find3 =["REPLACE THIS TEXT 1","REPLACE THIS TEXT 2", "REPLACE THIS TEXT 3", "REPLACE THIS TEXT 4",  "REPLACE THIS TEXT 5"]
        var replace = "<br />";
        var replace3 = ["TEXT REPLACED 1","TEXT REPLACED 2", "TEXT REPLACED 3","TEXT REPLACED 4","TEXT REPLACED 5"];
            
        for (i=0; i<find1.length; i++){
          var regex = new RegExp(find1[i],"g");
           mystring = mystring.replace(regex, "");
       }
        for (i=0; i<mystring.length; i++){
            mystring = mystring.replace(find3[i], replace3[i]);
       }
            
        mystring = mystring.replace(find2, replace);
        
        
       
        
        document.getElementById('result').innerHTML=mystring;
            
        console.info(mystring);
        } 
<meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <title>Clear text</title>
    <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<body>
  <div class = "columns mt-0 pt-0 mb-5 is-mobile">
    <div class = "column"></div>
    <div class = "column is-three-quarters mb3">
  <div class = "field">
    <label class = "label">Enter text here:</label>
    <div class = "control">
      <textarea class = "textarea" placeholder = "Text" id = "myTextArea">Text Value 
DEER
2024
Text Value 
DEER
2024
Text Value 
ELK
2024
REPLACE THIS TEXT 1
ELK
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
Text for DELETE 1
2024
Text for DELETE 2
2024
Text for DELETE 4
THUNDERBIRD
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
Text for DELETE 5
DEER
2024
Text for DELETE 6
ELK
2024
Text Value 
ELK
2024
REPLACE THIS TEXT 2
ELK
2024
Text Value 
ELK
2024
REPLACE THIS TEXT 3
ELK
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
REPLACE THIS TEXT 4
ELK
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
Text Value 
THUNDERBIRD
2024
Text Value 
ELK
2024
Text Value 
DEER
Text Value 
Text Value
ELK
2024
Text Value 
DEER
2024
Text Value 
DEER
2024
Text Value 
DEER
2024
Text Value 
DEER
2024
Text Value 
DEER
2024
Text Value 
ELK
2024
Text Value 
PANDA
2024
Text Value 
DEER
2024
Text Value 
PANDA
2024
Text for DELETE 7
PANDA
2024
Text Value 
THUNDERBIRD
2024
Text Value 
DEER
2024
PANDA
2024
Text Value 
THUNDERBIRD
2024
Text for DELETE 9
PANDA
2024
Text for DELETE 10
2024</textarea><Br>
       <button class = "button is-link" onclick = "textareadValue();">Clean</button>
    </div>
  </div><br clear = "all">
   <div id = "result" class = "pl-10"></div>
 </div>
<div class = "column"></div>
</div>
  </body>

гораздо проще сделать с элементами HTML, чем со строками

— Jaromanda X 20.06.2024 10:33

«но это плохой жесткий код, что-то вроде» - я даже не могу сказать, чего это должно было бы достичь. Вы будете перебирать каждый символ в mystring, преобразовывая его в регулярное выражение, а затем заменяя его пустой строкой. Не могу понять, как это вообще может иметь смысл (не считая того факта, что вы также манипулируете строкой во время ее цикла, что с самого начала не является хорошей идеей.)

— CBroe 20.06.2024 10:36

>> Гораздо проще сделать это с элементами HTML, чем со строками, но как?

— Cove 20.06.2024 10:39

@CBroe Я понимаю, что моя идея очень плохая, поэтому я создал этот пост с просьбой о помощи.

— Cove 20.06.2024 10:40
mystring = mystring.replace(/<br />(\s+<br />)+/g, '<br>');, вероятно, должен выполнить эту работу.
— CBroe 20.06.2024 10:45

@CBroe, спасибо, но на самом деле нет.

— Cove 20.06.2024 11:53
jsfiddle.net/sn3o94pm тогда не желаемый результат...?
— CBroe 20.06.2024 12:00

@CBroe Спасибо за желание помочь. Я видел, как ваш пример работает, но не в моем случае (я разместил полный код в описании вопроса).

— Cove 20.06.2024 13:34
javascript html dom
20.06.2024 10:32
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
8
60
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Если вы добавите then в DOM, вы сможете (обратно) перебрать дочерние элементы и удалить любой повторяющийся элемент.

Возможно, вам захочется расширить это, чтобы захватить первый/последний.

Ниже приводится

<br>
<em>Hello!</em>

<br>
<em>Hello!</em>

<br>
<em>Hello!</em>

<br>
<em>Hello!</em>

<br>
<em>Hello!</em>

<br>



const cs = document.body.children;
for (let i = cs.length - 1; i > 0; i--) {
    current = cs[i];
    before = cs[i - 1];
    if (current.nodeName === before.nodeName) {
        current.remove();
        console.info(`Removing child #${i}:`, current)
    }
}
<br />
<em>Hello!</em>

<br />
<em>Hello!</em>

<br />


<br />
<em>Hello!</em>

<br />
<em>Hello!</em>

<br />


<br />
<em>Hello!</em>

<br />


<br />

<br />

«добавить их в DOM» — в качестве следующего шага/расширения это должно быть возможно без добавления в DOM. См. этот ответ или, если jquery доступен, простой $("<div/>").html(str) для работы с ним в памяти.

— fdomn-m 20.06.2024 10:54

@ 0stone0, но действительно ли у меня здесь был случай DOM? Я сохраняю текст для замены в переменной mystring и показываю его в блоке document.getElementById('result').innerHTML=mystring;

— Cove 20.06.2024 11:59

В комментарии выше упоминается решение этой проблемы. Но установка innetHTML для строк dom на самом деле не является хорошим способом заполнения DOM. Возможно, вы сможете добавить минимально воспроизводимый пример к своему вопросу?

— 0stone0 20.06.2024 12:00

@0stone0 вставил полный пример в текст вопроса.

— Cove 20.06.2024 13:21
20.06.2024 10:41
Ответ принят как подходящий

Мне кажется, я нахожу выход не оптимальным, как кажется, а просто работающим. Я немного изменил порядок замены и добавил еще одно регулярное выражение для очистки символов новой строки. Спасибо всем за помощь.

function textareadValue() {
        var mystring =``;
        mystring = document.getElementById("myTextArea").value;
        var find1 = ["DEER", "ELK", "PANDA", "THUNDERBIRD", "Text for DELETE 1", "Text for DELETE 3", "Text for DELETE 4", "Text for DELETE 5", "Text for DELETE 6", "Text for DELETE 7", "Text for DELETE 8", "Text for DELETE 9", "Text for DELETE 10"];
        var find2 = /(\d{4})/g;
        var find3 =["REPLACE THIS TEXT 1","REPLACE THIS TEXT 2", "REPLACE THIS TEXT 3", "REPLACE THIS TEXT 4",  "REPLACE THIS TEXT 5"]
        var replace = "<br />";
        var replace2 =/[\r\n]+/g;
        var replace3 = ["TEXT REPLACED 1","TEXT REPLACED 2", "TEXT REPLACED 3","TEXT REPLACED 4","TEXT REPLACED 5"];
        for (i=0; i<mystring.length; i++){
            mystring = mystring.replace(find3[i], replace3[i]);
        }
        
        for (i=0; i<find1.length; i++){
          var regex = new RegExp(replace2,"g");
           mystring = mystring.replace(regex, "");
       }
        
        for (i=0; i<find1.length; i++){
          var regex = new RegExp(find1[i],"g");
           mystring = mystring.replace(regex, "");
       }
         mystring = mystring.replace(find2, replace);
    for (i=0; i< mystring.length; i++) {
    mystring = mystring.replace("<br /><br />", "<br />");
    }
   
        document.getElementById('result').innerHTML=mystring;
        console.info(mystring);
        } 
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <title>Clear text</title>
    <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    </head>
    <body>
     <div class = "columns mt-0 pt-0 mb-5 is-mobile">
    <div class = "column"></div>
    <div class = "column is-three-quarters mb3">
  <div class = "field">
    <label class = "label">Enter text here:</label>
    <div class = "control">
      <textarea class = "textarea" placeholder = "Text" id = "myTextArea">Text Value 
DEER
2024
Text Value 
DEER
2024
Text Value 
ELK
2024
REPLACE THIS TEXT 1
ELK
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
Text for DELETE 1
2024
Text for DELETE 2
2024
Text for DELETE 4
THUNDERBIRD
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
Text for DELETE 5
DEER
2024
Text for DELETE 6
ELK
2024
Text Value 
ELK
2024
REPLACE THIS TEXT 2
ELK
2024
Text Value 
ELK
2024
REPLACE THIS TEXT 3
ELK
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
REPLACE THIS TEXT 4
ELK
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
Text Value 
THUNDERBIRD
2024
Text Value 
ELK
2024
Text Value 
DEER
Text Value 
Text Value
ELK
2024
Text Value 
DEER
2024
Text Value 
DEER
2024
Text Value 
DEER
2024
Text Value 
DEER
2024
Text Value 
DEER
2024
Text Value 
ELK
2024
Text Value 
PANDA
2024
Text Value 
DEER
2024
Text Value 
PANDA
2024
Text for DELETE 7
PANDA
2024
Text Value 
THUNDERBIRD
2024
Text Value 
DEER
2024
PANDA
2024
Text Value 
THUNDERBIRD
2024
Text for DELETE 9
PANDA
2024
Text for DELETE 10
2024</textarea><Br>
       <button class = "button is-link" onclick = "textareadValue();">Clean</button>
    </div>
  </div><br clear = "all">
   <div id = "result" class = "pl-10"></div>
 </div>
<div class = "column"></div>
</div>

</body>
</html>
21.06.2024 08:12

Другие вопросы по теме

Z-index не работает с элементами, связанными с анимацией gsap
Динамически добавленная SVG-анимация иногда не срабатывает
Измените тег <br> на <?linebreak?> с помощью tcl tdom
Как заменить слова на странице HTML с помощью JS?
Есть ли в Javascript способ уменьшить размытие изображения поэтапно с помощью цикла и переменной?
Я не хочу, чтобы моя форма электронной почты перенаправлялась на мой php-файл
Можно ли использовать API перетаскивания HTML5 с JSON и JavaScript?
Как очистить данные из произвольного количества списков строк с помощью Python Selenium?
Как сделать фоновое изображение адаптивным с помощью CSS?
Bootstrap 5.1 Navbar с 3 разделами (слева, по центру, справа)

Похожие вопросы

Проверьте, находится ли номер в диапазоне
Сопоставьте значения из NgForm с моделью машинописного текста, определенной в Angular
Z-index не работает с элементами, связанными с анимацией gsap
Динамически добавленная SVG-анимация иногда не срабатывает
Есть ли способ предотвратить возврат echo json_encode() ответа JSON со всей страницей при отправке формы в тот же PHP-скрипт?
Состояние в обратном вызове IntersectionObserver не определено
Могу ли я использовать файлы ts точно так же, как я использую файлы js?
Ошибка типа: невозможно прочитать свойства неопределенного типа (чтение «вид»)
JSdoc vscode intellisense на обезьяне исправлена/добавлена ​​функция?
Как заменить слова на странице HTML с помощью JS?