使用 Javascript 将 HTML 转换为明文

Question

使用此处找到的代码：What is the most convenient way to convert HTML to plain text while preserving line breaks (with JavaScript)?

我需要能够使用 Javascript 将 HTML 转换为纯文本，通过一个按钮，该按钮将根据用户输入更新显示的文本

我使用的代码：

<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 sample
不幸的是，按钮无法正常工作，或者代码无法读取用户输入（下拉框和文本输入）。我该如何解决这个问题？

Answer 1

问题是您当前提取文本的方法无法获取输入值。您必须手动获取并重新插入：

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);

我已经更新了您的 fiddle 解决方案。

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

使用 Javascript 将 HTML 转换为明文

Using Javascript to convert HTML to Plaintext

javascript

html

button

plaintext