Блог

Главная - Вопросы по программированию - Удалить выбранный html-элемент из начального тега в конечный тег со значениями с помощью javascript

Удалить выбранный html-элемент из начального тега в конечный тег со значениями с помощью javascript

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я пытаюсь проанализировать HTML и хочу удалить все amp;<select>...amp;</select> из строки, которая находится в текстовом поле 1, и хочу показать вывод (обычный текст) в текстовом поле 2. Код приведен ниже:

 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <textarea id="TextArea1" rows="10" cols="100"></textarea><br />
    <textarea id="TextArea2" rows="10" cols="100"></textarea><br />
    <input id="Submit1" onclick="parsehtml()" type="submit" value="submit" />
    <script>
        function parsehtml() {
            let value = document.getElementById("TextArea1").value
                .split('n')
                .filter(item => item.startsWith('<span>'))
                .map(item => item.replace(/</?[^>] >/ig, " ").trim()).join(' ')

            document.getElementById("TextArea2").value = value
        }
    </script>
</body>
</html>

В моей текстовой области1 у меня есть код, подобный:

 
<span>Span 1</span>
<select>
<option>opt 01</option>
<option>opt 02</option>
</select>
<span>Span 2</span>
<select>
<option>opt 11</option>
<option>opt 12</option>
</select>

Я получаю вывод, подобный

 Span 1 Span 2

Код работает, если у меня все в отдельной строке. Но не работает, если у меня есть все коды в одной строке, например.

 <select><option>opt 1</option></select><span>Span 1</span>...

Я хочу удалить весь amp;<select> элемент со всеми его значениями из начального тега в конечный тег. и хотите выводить данные из динамического сгенерированного HTML-кода

 Hello <select class="..." onchange="..."><option>opt 01</option><option>opt 02</option></select><span>World</span> Hello <select><option>opt 11</option><option>opt 12</option></select> <span>Again</span>

//need output like below

//Hello World Hello Again

Комментарии:

1. Хм, вы не можете разобрать html с помощью регулярных выражений. В случае, если вы хотите просто удалить selects, вы можете использовать отложенное сопоставление и заменить

Ответ №1:

Вы можете создать a div , поместить TextArea1 в него содержимое в div виде HTML, использовать поддержку DOM Javascript для удаления select s и скопировать innerHTML в TextArea2 .

     function replaceSelect() {
        var div = document.createElement("div"); //created a div
        div.innerHTML = document.getElementById("TextArea1").value; //copied the source text as HTML into the div
        for (let select of div.querySelectorAll("select")) select.remove(); //Lopped select tags inside the div and removed them
        document.getElementById("TextArea2").innerText = div.innerHTML; //Copied the result into the target
    }  
 <textarea id="TextArea1"><select><option>opt 1</option></select><span>Span 1</span>...<select><option>opt 1</option></select><span>Span 2</span></textarea>
<textarea id="TextArea2"></textarea>
<input type="button" value="Remove Select" onclick="replaceSelect()">