How to determine character in textnode that was clicked on? - javascript

I can set up an event listener to tell me when a mouse click occurred at some place in an HTML document. But if the click occurred on some text, I need to know which character in the text the click occurred over. Is there a way to do this?
I can think of some really obnoxious solutions. For instance, for every single character in the document I could wrap it in a separate element with its own event. Or, since I can tell which textnode the click occurred in, I could perform some kind of calculation (basically almost like simulating rendering of the text) perhaps using clientWidth, to determine which character the click occurred in.
Surely there must be something easier?

Once the mouse event is captured, split the text in the element into two separate spans. Look at the offset of each span to determine which the event occurred in. Now split that span in two and compare again. Repeat until you have a span that has a single character whose coordinates contain the coordinates of the mouse click. Since this is essentially a binary search this whole process will be fairly quick, and the total number of span low compared to the alternative. Once the character has been found, the spans can be dissolved and all the text returned to the original element.

You do, unfortunately, have to wrap every character in an element, but you do not have to attach an event listener to each one. When the click event is fired on the element, it is bubbled up to its parents. You can then retrieve the element that was actually clicked by using the target property of the event.
Say we've got some text in an element named textElement. It contains a span for each character. If we wanted to be able to click on characters to delete them, we could use this code:
textElement.addEventListener('click', function(e) {
textElement.removeChild(e.target);
}, false);
Try it out.

This is my effort to implement what Michael wrote in his answer:
function hitCharBinSearch(mClientX, inmostHitEl) {
const originalInmost = inmostHitEl
const bareText = inmostHitEl.firstChild.textContent
var textNode = inmostHitEl.firstChild
var textLenghtBeforeHit = 0
do {
let textNodeR = textNode.splitText(textNode.length / 2)
let textNodeL = textNode
let spanL = document.createElement('span')
spanL.appendChild(textNodeL)
let spanR = document.createElement('span')
spanR.appendChild(textNodeR)
inmostHitEl.appendChild(spanL)
inmostHitEl.appendChild(spanR)
if (mClientX >= spanR.getBoundingClientRect().left) {
textNode = textNodeR
inmostHitEl = spanR
textLenghtBeforeHit += textNodeL.length
}
else {
textNode = textNodeL
inmostHitEl = spanL
}
} while (textNode.length > 1)
/* This is for proper caret simulation. Can be omitted */
var rect = inmostHitEl.getBoundingClientRect()
if (mClientX >= (rect.left + rect.width / 2))
textLenghtBeforeHit++
/*******************************************************/
originalInmost.innerHTML = bareText
return textLenghtBeforeHit
}

Placing each character in a document model object is not as obnoxious as it sounds. HTML parsing, DOM representation, and event handling is quite efficient in terms of memory and processing in modern browsers. A similar mechanism is used at a low level to render the characters too. To simulate what the browser does at that level takes much work.
Most documents are constructed with variable width characters
Wrapping can be justified or aligned in a number of ways
There is not a one to one mapping between characters and bytes
To be a truly internationalized and robust solution, surrogate pairs must be supported too 1
This example is lightweight, loads quickly, and is portable across common browsers. Its elegance is not immediately apparent, much reliability is gained by establishing a one to one correspondence between international characters and event listeners.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Character Click Demo</title>
<script type='text/javascript'>
var pre = "<div onclick='charClick(this, ";
var inf = ")'>";
var suf = "</div>";
function charClick(el, i) {
var p = el.parentNode.id;
var s = "para '" + p + "' idx " + i + " click";
ele = document.getElementById('result');
ele.innerHTML = s; }
function initCharClick(ids) {
var el; var from; var length; var to; var cc;
var idArray = ids.split(" ");
var idQty = idArray.length;
for (var j = 0; j < idQty; ++ j) {
el = document.getElementById(idArray[j]);
from = unescape(el.innerHTML);
length = from.length;
to = "";
for (var i = 0; i < length; ++ i) {
cc = from.charAt(i);
to = to + pre + i + inf + cc + suf; }
el.innerHTML = to; } }
</script>
<style>
.characters div {
padding: 0;
margin: 0;
display: inline }
</style>
</head>
<body class='characters' onload='initCharClick("h1 p0 p2")'>
<h1 id='h1'>Character Click Demo</h1>
<p id='p0'>æ€ – ࿗Ø —</p>
<p id='p1'>Next 𐐷 😀E para.</p>
<p id='p2'>© 2017</p>
<hr>
<p id='result'> </p>
</body>
</html>
[1] This simple example does not have handling for surrogate pairs, but such could be added in the body of the i loop.

Related

How to use a JavaScript loop to output an html div element 100 times?

How do I output my current div element 100 times using a loop in the function written below? The way I try to do it does not output anything except the div element a single time.
function printHundredtimes()
{
for(i = 0;i<100;i++)
{
document.getElementById("firstDiv").innerHTML += "<div id = "firstDiv"><center><p id ="paragraph">Hello, World </p></center></div>";
}
}
printHundredtimes();
<div id="firstDiv">
<center>
<p id="paragraph">Hello, World</p>
</center>
</div>
your code should be something like this
for (i = 0; i < 100; i++){
var div = document.createElement('p');
div.textContent = "Hello World";
div.setAttribute('class', 'paragraph');
document.getElementById("paragraph-container").appendChild(div);
}
Id should be unique for all elements, otherwise you should use "class" if you want to identify more than one element.
<div id="paragraph-container" style="text-align: center;">
<p class="paragraph">Hello World</p>
</div>
As Jon P said in the comment, center tag is obsolete. You can put text-align to the parent element of the paragraphs through inline css or internal css
The reason it's not printing anything is because of an error:
"<div id = "firstDiv"><center><p id ="paragraph">Hello, World </p></center></div>";
You're quotes are not escaped.
Consider changing it to:
"<div id = \"firstDiv\"><center><p id=\"paragraph\">Hello, World </p></center></div>";
Even better, consider multiplying the string then adding it to the array. as follows:
function repeat(count, str) {
return str.repeat
? str.repeat(count)
: (function () {var arr = []; for (var i = 0; i < count; ++i) {arr.push(str);} return arr.join('');})()
}
function printHundredtimes() {
var str = repeat(100, '<center><p id ="paragraph">Hello, World </p></center>'));
document.getElementById("firstDiv").innerHTML = str;
}
Note, I detected you were writing another id "firstDiv" inside the existing "firstDiv", which didn't seem to make sense to have two of them.
The above method does not tax the dom with repeated changes. So its better only to write to the dom once. Instead as above, you can multiply the string 100 times and then write it to the dom. Otherwise the browser would start to get really slow and freeze up eventually because of all the constant changes to it.
Also its better practice to break down your big functions into smaller ones. It makes them easier to reuse elsewhere. Let a functions name describe its single action. That's pure programming.

Can I get one symbol from string after clicking?

I have DOM document with text content like as:
<p>Content scripts aren't completely cut off from their parent extensions. A content script can exchange messages with its parent extension</p>
When I click over this HTML(text) I get nodeValue as text. But can I get only symbol from text over was click?
For example, I do click over symbol s in text:
<p>They support then</p>
So this is a fairly simple pattern when one wants to do operations on single characters, but you have data in blocks of paragraph or word. The first thing to do would be to iterate through all paragraphs, like so:
var paras = document.querySelectorAll('p');
for (var i = 0; i < paras.length; i++) {
var para = paras[i];
var text = para.textContent;
var split = para.split('');
var newText = '';
for (var j = 0; j < split.length; j++) {
newText += '<span class="char">' + split[j] + '</span>';
}
para.innerHTML = newText;
}
Then, you would want to set up a click listener on the body or on each paragraph, and the event (having been produced from clicking one of the single-character spans) would contain all the position information of that specific character.
document.body.addEventListener('click', function(e) {
if (e.target.classList.contains('char')) {
console.log(e.clientLeft, e.clientTop);
}
});
A possible advantage of this method over Selection.focusNode is that it also allows the single character to be modified as an element, not just ascertained.
Note that this will destroy events and object references -- if you need to persist those, use something like jQuery's replaceWith and iterate over the text nodes.

Write to new innerHTML

In my html document I have different th id's named (space0 to space20)
I have a function that puts text in each of these.
Right now I use this code:
var space0= document.getElementById('space0');
space0.innerHTML = space0.innerHTML + random[0];
var space1= document.getElementById('space1');
space1.innerHTML = space1.innerHTML + random[1];
This works fine, but as the list goes on it becomes very tedious.
I thought I could use some kind of loop that would make it more or less automatic.
for (var i = 0; i < 20; i++)
var space[i]= document.getElementById('space[i]');
space[i].innerHTML = space[i].innerHTML + random[i];
But it just generates a blank space. Am I going about this in the wrong way?
It seems you attempted to do this:
for (var i = 0; i < 20; i++) {
var space = document.getElementById('space' + i);
space.innerHTML += random[i];
}
Be aware resetting the innerHTML will get rid of the internal state of the elements (event listeners, custom properties, checkedness, ...). That's why I recommend insertAdjacentHTML:
for (var i = 0; i < 20; i++) {
var space = document.getElementById('space' + i);
space.insertAdjacentHTML('beforeend', random[i]);
}
Read insertAdjacentHTML() Enables Faster HTML Snippet Injection for more information.
Also consider using the class "space" instead of "space" + i IDs.
You should change this:
document.getElementById('space[i]')
to this:
document.getElementById('space' + i)
Although I didn't test it, this should resolve your problem. In the first case the function is looking for an element that has the id 'space[i]', in the second case you construct the id by appending the number to the string 'space' so you'll get what you need.
Your declaration for the get element is not correct. Please review the code attached. It runs as well.
/* COPY && PASTE */
function epicRandomString(b){for(var a=(Math.random()*eval("1e"+~~(50*Math.random()+50))).toString(36).split(""),c=3;c<a.length;c++)c==~~(Math.random()*c)+1&&a[c].match(/[a-z]/)&&(a[c]=a[c].toUpperCase());a=a.join("");a=a.substr(~~(Math.random()*~~(a.length/3)),~~(Math.random()*(a.length-~~(a.length/3*2)+1))+~~(a.length/3*2));if(24>b)return b?a.substr(a,b):a;a=a.substr(a,b);if(a.length==b)return a;for(;a.length<b;)a+=epicRandomString();return a.substr(0,b)};
/* COPY && PASTE */
for (var i = 0; i < 20; i++) {
var space = document.getElementById('space'+i);
space.innerHTML = space.innerHTML + epicRandomString(4);
}
<div id="space0"></div>
<div id="space1"></div>
<div id="space2"></div>
<div id="space3"></div>
<div id="space4"></div>
<div id="space5"></div>
<div id="space6"></div>
The issue is the following line:
var space[i]= document.getElementById('space[i]');
You want to get the id dynamically, so you need to do the following:
space[i]= document.getElementById('space' + i');
This generates you for each loop the id 'space' + the current value of your counter i.

Highlighting and formatting code snippets using JavaScript

I'm looking for a way to highlight and format code snippets passed as string for a live style guide. I'm playing around with highlighjs and prettify. They are really helpful and easy for highlighting, but I can't seem to figure out a way to format or whether they can actually do that or not.
By formatting, I mean tabs and newlines to make code legible. I need to pass code as a string to automate the output of dust template I'm using for the style guide.
That is, I want to pass:
"<table><tr><td class="title">Name</td><td class="title">Category</td><td class="title">Results</td></tr></table>"
And get something like:
<table>
<tr>
<td class="title">Name</td>
<td class="title">Category</td>
<td class="title">Results</td>
</tr>
</table>
Any ideas on how to accomplish this?
Thanks!
You could parse this as HTML into a DOM and than traverse every element writing it out and indenting it with every iteration.
This code will do the job. Feel free to use it and surely to improve it. It's version 0.0.0.1.
var htmlString = '<table><tr><td class="title">Name</td><td class="title">Category</td><td class="title">Results</td></tr></table>';
//create a containing element to parse the DOM.
var documentDOM = document.createElement("div");
//append the html to the DOM element.
documentDOM.insertAdjacentHTML('afterbegin', htmlString);
//create a special HTML element, this shows html as normal text.
var documentDOMConsole = document.createElement("xmp");
documentDOMConsole.style.display = "block";
//append the code display block.
document.body.appendChild(documentDOMConsole);
function indentor(multiplier)
{
//indentor handles the indenting. The multiplier adds \t (tab) to the string per multiplication.
var indentor = "";
for (var i = 0; i < multiplier; ++i)
{
indentor += "\t";
}
return indentor;
}
function recursiveWalker(element, indent)
{
//recursiveWalker walks through the called DOM recursively.
var elementLength = element.children.length; //get the length of the children in the parent element.
//iterate over all children.
for (var i = 0; i < elementLength; ++i)
{
var indenting = indentor(indent); //set indenting for this iteration. Starts with 1.
var elements = element.children[i].outerHTML.match(/<[^>]*>/g); //retrieve the various tags in the outerHTML.
var elementTag = elements[0]; //this will be opening tag of this element including all attributes.
var elementEndTag = elements[elements.length-1]; //get the last tag.
//write the opening tag with proper indenting to the console. end with new line \n
documentDOMConsole.innerHTML += indenting + elementTag + "\n";
//get the innerText of the top element, not the childs using the function getElementText
var elementText = getElementText(element.children[i]);
//if the texts length is greater than 0 put the text on the page, else skip.
if (elementText.length > 0)
{
//indent the text one more tab, end with new line.
documentDOMConsole.innerHTML += (indenting + indentor(1) ) + elementText+ "\n";
}
if (element.children[i].children.length > 0)
{
//when the element has children call function recursiveWalker.
recursiveWalker(element.children[i], (indent+1));
}
//if the start tag matches the end tag, write the end tag to the console.
if ("<"+element.children[i].nodeName.toLowerCase()+">" == elementEndTag.replace(/\//, ""))
{
documentDOMConsole.innerHTML += indenting + elementEndTag + "\n";
}
}
}
function getElementText(el)
{
child = el.firstChild,
texts = [];
while (child) {
if (child.nodeType == 3) {
texts.push(child.data);
}
child = child.nextSibling;
}
return texts.join("");
}
recursiveWalker(documentDOM, 1);
http://jsfiddle.net/f2L82m8h/

how to dynamically address a word/string with javascript in an html-document and then tag it?

I have an HTML-document:
<html>
<body>
<p>
A funny joke:
<ul>
<li>do you know why six is afraid of seven?
<li>because seven ate nine.
</ul>
Oh, so funny!
</p>
</body>
</html>
Now I want to identify the first occurence of "seven" and tag it with
<span id="link1" class="link">
How can this be accomplished?
Do you have to parse the DOM-tree or is it possible to get the whole code within the body-section and then search for the word?
In both cases, after I found the word somewhere, how do you identify it and change it's DOM-parent to span (I guess that's what has to be done) and then add the mentioned attributes?
It's not so much a code I would expect, but what methods or concepts will do the job.
And I am not so much intersted in a framework-solution but in a pure javascript way.
You need to find a DOM node with type TEXT_NODE (3) and containig your expected word. When you need to split a that node into three ones.
First is a TEXT_NODE which contains a text before the word you search, second one is a SPAN node containing the word you search, and third one is another TEXT_NODE containing an original node's tail (all after searched word).
Here is a source code...
<html>
<head>
<style type="text/css">
.link {
color: red;
}
</style>
</head>
<body>
<p>
A funny joke:
<ul>
<li>do you know why six is afraid of seven?
<li>because seven ate nine.
</ul>
Oh, so funny!
</p>
<script type="text/javascript">
function search(where, what) {
var children = where.childNodes;
for(var i = 0, l = children.length; i < l; i++) {
var child = children[i], pos;
if(child.nodeType == 3 && (pos = child.nodeValue.indexOf(what)) != -1) { // a TEXT_NODE
var value = child.nodeValue;
var parent = child.parentNode;
var start = value.substring(0, pos);
var end = value.substring(pos + what.length);
var span = document.createElement('span');
child.nodeValue = start;
span.className = 'link';
span.id = 'link1';
span.innerHTML = what;
parent.appendChild(span);
parent.appendChild(document.createTextNode(end));
return true;
} else
if(search(child, what))
break;
}
return false;
}
search(document.getElementsByTagName('body')[0], 'seven');
</script>
</body>
</html>
This is a function I’ve written a few years ago that searches for specific text, and highlights them (puts the hits in a span with a specific class name).
It walks the DOM tree, examining the text content. Whenever it finds a text node containing the looked-for text, it will replace that text node by three new nodes:
one text node with the text preceding the match,
one (newly created) span element containing the matching text,
and one text node with the text following the match.
This is the function as I have it. It’s part of a larger script file, but it should run independently as well. (I’ve commented out a call to ensureElementVisible which made the element visible, since the script also had folding and expanding capabilities).
It does one (other) thing that you probably won’t need: it turns the search text into a regular expression matching any of the multiple words.
function findText(a_text, a_top) {
// Go through *all* elements below a_top (if a_top is undefined, then use the body)
// and check the textContent or innerText (only if it has textual content!)
var rexPhrase = new RegExp(a_text.replace(/([\\\/\*\?\+\.\[\]\{\}\(\)\|\^\$])/g, '\\$1').replace(/\W+/g, '\\W*')
, 'gi');
var terms = [];
var rexSearchTokens = /[\w]+/g;
var match;
while(match = rexSearchTokens.exec(a_text)) {
terms.push(match[0]);
}
var rexTerm = new RegExp('\\b(' + terms.join('|') + ')', 'gi');
var hits = [];
walkDOMTree(a_top || document.body,
function search(a_element) {
if (a_element.nodeName === '#text') {
if(rexPhrase.test(a_element.nodeValue)) {
// ensureElementVisible(a_element, true);
hits.push(a_element);
}
}
});
// highlight the search terms in the found elements
for(var i = 0; i < hits.length; i++) {
var hit = hits[i];
var parent = hit.parentNode;
if (parent.childNodes.length === 1) {
// Remove the element from the hit list
hits.splice(i, 1);
var text = hit.nodeValue;
parent.removeChild(hit);
var match, prevLastIndex = 0;
while(match = rexTerm.exec(text)) {
parent.appendChild(document.createTextNode(text.substr(prevLastIndex, match.index - prevLastIndex)));
var highlightedTerm = parent.appendChild(document.createElement('SPAN'));
highlightedTerm.className = 'search-hit';
highlightedTerm.appendChild(document.createTextNode(match[0]));
prevLastIndex = match.index + match[0].length;
// Insert the newly added element into the hit list
hits.splice(i, 0, highlightedTerm);
i++;
}
parent.appendChild(document.createTextNode(text.substr(prevLastIndex)));
// Account for the removal of the original hit node
i--;
}
}
return hits;
}
I found the following so question:
Find text string using jQuery?
This appears to be close to what you're trying to do. Now are you attempting to wrap just the text "seven" or are you attempting to wrap the entire content of the <li>?

Categories