Hugging Face's logo

Spaces:
wadood
/
get-span-indices
Running

App Files Community
wadood commited on
Commit
a7a27f6
·
1 Parent(s): b621168

added robustnes to whitespaces

Browse files
Files changed (1) hide show
  1. index.html +52 -38
index.html CHANGED
@@ -2,7 +2,7 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
- <title>Text Selection Example</title>
6
  <style>
7
  #settings {
8
  margin-bottom: 15px;
@@ -14,7 +14,7 @@
14
  }
15
  #inputBox {
16
  width: 90%;
17
- height: 150px;
18
  border: 1px solid #ccc;
19
  padding: 10px;
20
  white-space: pre-wrap;
@@ -36,9 +36,9 @@
36
  </style>
37
  </head>
38
  <body>
39
- <h3>Highlight text to get indices</h3>
40
 
41
- <!-- Settings panel -->
42
  <div id="settings">
43
  <strong>Settings (rename keys):</strong><br><br>
44
  <label>Span Text Key: <input id="keySpan" type="text" value="span_text"></label>
@@ -46,6 +46,7 @@
46
  <label>End Key: <input id="keyEnd" type="text" value="end"></label>
47
  </div>
48
 
 
49
  <div id="inputBox" contenteditable="true"></div>
50
 
51
  <button onclick="getSelectionIndices()">Get Span JSON</button>
@@ -53,46 +54,60 @@
53
  <pre id="results"></pre>
54
 
55
  <script>
56
- let spans = []; // internal storage always uses fixed keys
57
  let lastText = "";
58
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
59
  function getSelectionIndices() {
60
  const container = document.getElementById("inputBox");
61
- const text = container.innerText;
62
  const selection = window.getSelection();
63
-
64
- if (!selection.rangeCount) {
65
- document.getElementById("results").innerText = "No selection.";
66
- return;
67
- }
68
 
69
  const range = selection.getRangeAt(0);
70
- if (!container.contains(range.startContainer) || !container.contains(range.endContainer)) {
71
- document.getElementById("results").innerText = "Selection outside input box.";
72
- return;
73
- }
74
 
75
  const selectedText = selection.toString();
76
- if (!selectedText) {
77
- document.getElementById("results").innerText = "No text selected.";
78
- return;
79
- }
80
 
81
- // Compute indices
82
- const preRange = document.createRange();
83
- preRange.setStart(container, 0);
 
 
 
84
  preRange.setEnd(range.startContainer, range.startOffset);
85
- const startIndex = preRange.toString().length;
86
- const endIndex = startIndex + selectedText.length;
87
 
88
- // Store span internally with fixed keys
89
- const spanInfo = {
90
- span_text: selectedText,
91
- start: startIndex,
92
- end: endIndex
93
- };
 
 
94
 
95
- // Prepend and keep only last 5
96
  spans.unshift(spanInfo);
97
  spans = spans.slice(0, 5);
98
 
@@ -100,25 +115,24 @@
100
  }
101
 
102
  function renderSpans() {
103
- // Get current key names
104
  const keySpan = document.getElementById("keySpan").value || "span_text";
105
  const keyStart = document.getElementById("keyStart").value || "start";
106
  const keyEnd = document.getElementById("keyEnd").value || "end";
107
 
108
- // Rebuild spans with current keys
109
  const renamedSpans = spans.map(s => ({
110
  [keySpan]: s.span_text,
111
  [keyStart]: s.start,
112
  [keyEnd]: s.end
113
  }));
114
 
115
- document.getElementById("results").innerText =
116
- renamedSpans.length ? JSON.stringify(renamedSpans, null, 2) : "";
 
117
  }
118
 
119
  // Reset spans if input text changes
120
- document.getElementById("inputBox").addEventListener("input", function () {
121
- const currentText = this.innerText;
122
  if (currentText !== lastText) {
123
  spans = [];
124
  document.getElementById("results").innerText = "";
@@ -126,7 +140,7 @@
126
  }
127
  });
128
 
129
- // Update displayed spans if settings change
130
  document.getElementById("keySpan").addEventListener("input", renderSpans);
131
  document.getElementById("keyStart").addEventListener("input", renderSpans);
132
  document.getElementById("keyEnd").addEventListener("input", renderSpans);
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <title>Text Selection</title>
6
  <style>
7
  #settings {
8
  margin-bottom: 15px;
 
14
  }
15
  #inputBox {
16
  width: 90%;
17
+ min-height: 150px;
18
  border: 1px solid #ccc;
19
  padding: 10px;
20
  white-space: pre-wrap;
 
36
  </style>
37
  </head>
38
  <body>
39
+ <h3>Highlight text to get indices (accurate whitespace & line break)</h3>
40
 
41
+ <!-- Settings Panel -->
42
  <div id="settings">
43
  <strong>Settings (rename keys):</strong><br><br>
44
  <label>Span Text Key: <input id="keySpan" type="text" value="span_text"></label>
 
46
  <label>End Key: <input id="keyEnd" type="text" value="end"></label>
47
  </div>
48
 
49
+ <!-- Editable div -->
50
  <div id="inputBox" contenteditable="true"></div>
51
 
52
  <button onclick="getSelectionIndices()">Get Span JSON</button>
 
54
  <pre id="results"></pre>
55
 
56
  <script>
57
+ let spans = [];
58
  let lastText = "";
59
 
60
+ // Convert HTML content to normalized text where line breaks are \n
61
+ function getNormalizedText(container) {
62
+ let html = container.innerHTML;
63
+
64
+ // Replace empty divs with \n
65
+ html = html.replace(/<div><br><\/div>/gi, '\n');
66
+
67
+ // Replace remaining divs with \n at start, remove closing divs
68
+ html = html.replace(/<div>/gi, '\n').replace(/<\/div>/gi, '');
69
+
70
+ // Replace <br> with \n
71
+ html = html.replace(/<br\s*\/?>/gi, '\n');
72
+
73
+ // Replace &nbsp; with space
74
+ html = html.replace(/&nbsp;/g, ' ');
75
+
76
+ // Strip other tags just in case
77
+ html = html.replace(/<[^>]+>/g, '');
78
+
79
+ return html;
80
+ }
81
+
82
  function getSelectionIndices() {
83
  const container = document.getElementById("inputBox");
 
84
  const selection = window.getSelection();
85
+ if (!selection || !selection.rangeCount) return;
 
 
 
 
86
 
87
  const range = selection.getRangeAt(0);
88
+ if (!container.contains(range.startContainer) || !container.contains(range.endContainer)) return;
 
 
 
89
 
90
  const selectedText = selection.toString();
91
+ if (!selectedText) return;
 
 
 
92
 
93
+ // Normalize the container text
94
+ const normalizedText = getNormalizedText(container);
95
+
96
+ // Get text before selection
97
+ const preRange = range.cloneRange();
98
+ preRange.selectNodeContents(container);
99
  preRange.setEnd(range.startContainer, range.startOffset);
 
 
100
 
101
+ const tempDiv = document.createElement("div");
102
+ tempDiv.appendChild(preRange.cloneContents());
103
+ let preText = getNormalizedText(tempDiv);
104
+
105
+ const start = preText.length;
106
+ const end = start + selectedText.length;
107
+
108
+ const spanInfo = { span_text: selectedText, start, end };
109
 
110
+ // Prepend and keep last 5 spans
111
  spans.unshift(spanInfo);
112
  spans = spans.slice(0, 5);
113
 
 
115
  }
116
 
117
  function renderSpans() {
 
118
  const keySpan = document.getElementById("keySpan").value || "span_text";
119
  const keyStart = document.getElementById("keyStart").value || "start";
120
  const keyEnd = document.getElementById("keyEnd").value || "end";
121
 
 
122
  const renamedSpans = spans.map(s => ({
123
  [keySpan]: s.span_text,
124
  [keyStart]: s.start,
125
  [keyEnd]: s.end
126
  }));
127
 
128
+ document.getElementById("results").innerText = renamedSpans.length
129
+ ? JSON.stringify(renamedSpans, null, 2)
130
+ : "";
131
  }
132
 
133
  // Reset spans if input text changes
134
+ document.getElementById("inputBox").addEventListener("input", function() {
135
+ const currentText = getNormalizedText(this);
136
  if (currentText !== lastText) {
137
  spans = [];
138
  document.getElementById("results").innerText = "";
 
140
  }
141
  });
142
 
143
+ // Re-render spans if key names change
144
  document.getElementById("keySpan").addEventListener("input", renderSpans);
145
  document.getElementById("keyStart").addEventListener("input", renderSpans);
146
  document.getElementById("keyEnd").addEventListener("input", renderSpans);