1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <meta charset="utf-8">
|
5 | <title>math.js | printing HTML</title>
|
6 |
|
7 | <script src="../../lib/browser/math.js"></script>
|
8 |
|
9 | <style>
|
10 | body {
|
11 | font-size: 11pt;
|
12 | font-family: verdana, arial, sans-serif;
|
13 | }
|
14 |
|
15 | h1 {
|
16 | font-size: 1rem;
|
17 | }
|
18 |
|
19 | fieldset {
|
20 | display: inline;
|
21 | margin: 0 50px 10px 0;
|
22 | padding: 0;
|
23 | border: none;
|
24 | }
|
25 |
|
26 | input[type=text] {
|
27 | font-size: 11pt;
|
28 | font-family: verdana, arial, sans-serif;
|
29 | padding: 5px;
|
30 | width: calc(100% - 14px);
|
31 | }
|
32 |
|
33 | label {
|
34 | margin: 0 5px 0 0;
|
35 | }
|
36 |
|
37 | table {
|
38 | width: 100%;
|
39 | border-collapse: collapse;
|
40 | }
|
41 |
|
42 | table td,
|
43 | table th {
|
44 | padding: 5px;
|
45 | border: 1px solid LightGrey;
|
46 | }
|
47 |
|
48 | table th {
|
49 | background-color: LightGrey;
|
50 | }
|
51 |
|
52 |
|
53 | .math-function {
|
54 | color: Purple;
|
55 | font-weight: bold;
|
56 | }
|
57 |
|
58 | .math-number {
|
59 | color: Blue;
|
60 | }
|
61 |
|
62 | .math-boolean {
|
63 | color: Green;
|
64 | }
|
65 |
|
66 | .math-string {
|
67 | color: Grey;
|
68 | }
|
69 |
|
70 | .math-string::before,
|
71 | .math-string::after {
|
72 | content: "\"";
|
73 | }
|
74 |
|
75 | .math-property {
|
76 | font-style: italic;
|
77 | }
|
78 |
|
79 | .math-explicit-binary-operator::before,
|
80 | .math-explicit-binary-operator::after {
|
81 | content: " ";
|
82 | }
|
83 |
|
84 | .math-separator::after,
|
85 | .math-assignment-operator::after {
|
86 | content: " ";
|
87 | }
|
88 | </style>
|
89 | </head>
|
90 | <body>
|
91 | <h1>Expression evaluation and HTML code generation with math.js</h1>
|
92 | <form>
|
93 | <fieldset>
|
94 | Parenthesis option:
|
95 | <label><input type="radio" name="parenthesis" value="keep" checked>keep</label>
|
96 | <label><input type="radio" name="parenthesis" value="auto">auto</label>
|
97 | <label><input type="radio" name="parenthesis" value="all">all</label>
|
98 | </fieldset>
|
99 | <fieldset>
|
100 | Implicit multiplication:
|
101 | <label><input type="radio" name="implicit" value="hide" checked>hide</label>
|
102 | <label><input type="radio" name="implicit" value="show">show</label>
|
103 | </fieldset>
|
104 | </form>
|
105 | <table>
|
106 | <tr>
|
107 | <th>Expression</th>
|
108 | <td><input type="text" id="expr"/></td>
|
109 | </tr>
|
110 | <tr>
|
111 | <th>Result</th>
|
112 | <td><div id="result"></div></td>
|
113 | </tr>
|
114 | <tr>
|
115 | <th>HTML output</th>
|
116 | <td><div id="output">$$$$</div></td>
|
117 | </tr>
|
118 | <tr>
|
119 | <th>HTML code</th>
|
120 | <td><div id="code">$$$$</div></td>
|
121 | </tr>
|
122 | </table>
|
123 | <script>
|
124 | const expr = document.getElementById('expr')
|
125 | const output = document.getElementById('output')
|
126 | const code = document.getElementById('code')
|
127 | const result = document.getElementById('result')
|
128 | let options = {parenthesis: 'keep', implicit: 'hide'}
|
129 |
|
130 |
|
131 | expr.value = 'sqrt(75/3)+det([[-1,2],[3,1]])-sin(pi/4)^2'
|
132 |
|
133 | function print () {
|
134 | let parsed = null
|
135 |
|
136 | try {
|
137 |
|
138 | parsed = math.parse(expr.value)
|
139 |
|
140 |
|
141 | result.innerHTML = math.format(parsed.compile().evaluate())
|
142 |
|
143 |
|
144 | const html = math.parse(expr.value).toHTML(options)
|
145 | output.innerHTML = html
|
146 |
|
147 |
|
148 | code.innerHTML = html.replace(/</g, '<').
|
149 | replace(/>/g, '>').
|
150 | replace(/<\/span>/g, '</span><br />')
|
151 | }
|
152 | catch (err) {
|
153 | result.innerHTML = '<span style="color: red;">' + err.toString() + '</span>'
|
154 | }
|
155 | }
|
156 |
|
157 | window.onload = print
|
158 | expr.oninput = print
|
159 |
|
160 |
|
161 | const controls = document.querySelectorAll('input[type=radio]')
|
162 | controls.forEach(function (control) {
|
163 | control.onclick = function() {
|
164 | options[control.name] = control.value
|
165 | print()
|
166 | }
|
167 | })
|
168 | </script>
|
169 | </body>
|
170 | </html>
|