Using Javascript to convert HTML to Plaintext

Question

Using code found here: What is the most convenient way to convert HTML to plain text while preserving line breaks (with JavaScript)?

I need to be able to convert HTML to plaintext using Javascript, via a button that will update the text displayed depending on user input

The code that I'm using:

<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
Unfortunately, either the button isn't working, or the code will not read the user input (dropdown box and text input). How can I fix this?

start by looking at errors thrown in browser console – charlietfl Feb 03 '17 at 16:58 — charlietfl, Feb 03 '17 at 16:58

Schlaus · Accepted Answer · 2017-02-03T17:50:05.903

1

The problem is that your current method of extracting the text wont get the values of inputs. You'll have to fetch and reinsert those manually:

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

I've updated your fiddle with a solution that does that.

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

edited Feb 03 '17 at 17:50

answered Feb 03 '17 at 17:04

Schlaus

18,144
10
36
64

Hi Schlaus, I updated your fiddle as the OP's onclick function was also calling getInnerText() with no parameters and therefore kicking an error. Please see https://jsfiddle.net/hnzck5nt/6/ - if you'd like to edit your answer – Booboobeaker Feb 03 '17 at 17:45
@Booboobeaker Thanks, didn't have console on and so I didn't notice the error. Updated to your version! – Schlaus Feb 03 '17 at 17:50

Using Javascript to convert HTML to Plaintext

1 Answers1