Использование Javascript для преобразования HTML в обычный текст

Используя код, найденный здесь: l/3813520#3813520">Какой наиболее удобный способ преобразовать HTML в обычный текст с сохранением разрывов строк (с помощью JavaScript)?

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

Код, который я использую:

<div id="content">
<p>
    Here is a paragraph with a line break in it
    <br>
    Second line
</p>
<p>
Operating System:
          <select id='OperatingSystem'>
            <option value='Windows10'>Windows 10</option>
            <option value='Windows8.1'>Windows 8.1</option>
            <option value='Windows8'>Windows 8</option>
            <option value='Windows7'>Windows 7</option>
            <option value='WindowsVista'>Windows Vista</option>
            <option value='WindowsXP'>Windows XP</option>
            <option value='Mac10.12'>Mac 10.12 Sierra</option>
            <option value='Mac10.11'>Mac 10.11 El Capitan</option>
            <option value='Mac10.10'>Mac 10.10 Yosemite</option>
            <option value='Mac10.9'>Mac 10.9 Mavericks</option>
            <option value='Mac10.8'>Mac 10.8 Mountain Lion</option>
            <option value='Mac10.7'>Mac 10.7 Lion</option>
            <option value='Android'>Android</option>
            <option value='iOS'>iOS</option>
            <option value='Other'>Other</option>
          </select>
    <br/>Alternate Phone:
          <input value="Boogers" type="text">
</p>
</div>
<!-- Submit -->
<input type="submit" value="submit" onclick="getInnerText();" />
<textarea id="text" rows="6" cols="50"></textarea>
<!-- Function -->
<script>
function getInnerText(el)
{
var sel, range, innerText = "";
if (typeof document.selection != "undefined" && typeof document.body.createTextRange != "undefined") {
    range = document.body.createTextRange();
    range.moveToElementText(el);
    innerText = range.text;
} else if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
    sel = window.getSelection();
    sel.selectAllChildren(el);
    innerText = "" + sel;
    sel.removeAllRanges();
}
return innerText;
}

document.getElementById("text").value = getInnerText(document.getElementById("content"));
</script>
<!-- Tabs Javascript - End -->

пример jsfiddle
К сожалению, либо кнопка не работает, либо код не будет читать пользовательский ввод (раскрывающийся список и ввод текста). Как я могу это исправить?


javascript button html plaintext
person TanyaW.    schedule 03.02.2017    source источник
comment
начните с просмотра ошибок, выдаваемых в консоли браузера   -  person charlietfl    schedule 03.02.2017

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, что ваш текущий метод извлечения текста не получит значения входных данных. Вам придется извлечь и повторно вставить их вручную:

var os = document.getElementById('OperatingSystem').value;
var phone = document.getElementById('phone-input').value;
innerText = innerText.replace('Alternate Phone:', 'Alternate Phone: ' + phone);
innerText = innerText.replace('Operating System:', 'Operating System: ' + os);

Я обновил вашу скрипку решением, которое делает это.

https://jsfiddle.net/hnzck5nt/6/

person Schlaus    schedule 03.02.2017
comment
Привет, Шлаус, я обновил твою скрипку, так как функция onclick OP также вызывала getInnerText() без параметров и, следовательно, выдавала ошибку. См. jsfiddle.net/hnzck5nt/6 - если вы хотите отредактировать свой ответ. - person Booboobeaker; 03.02.2017
comment
@Booboobeaker Спасибо, у меня не было консоли, поэтому я не заметил ошибки. Обновил до вашей версии! - person Schlaus; 03.02.2017