How to wrap part of a text in a node with JavaScript - javascript

I have a challenging problem to solve. I'm working on a script which takes a regex as an input. This script then finds all matches for this regex in a document and wraps each match in its own <span> element. The hard part is that the text is a formatted html document, so my script needs to navigate through the DOM and apply the regex across multiple text nodes at once, while figuring out where it has to split text nodes if needed.
For example, with a regex that captures full sentences starting with a capital letter and ending with a period, this document:
<p>
<b>HTML</b> is a language used to make <b>websites.</b>
It was developed by <i>CERN</i> employees in the early 90s.
</p>
Would ideally be turned into this:
<p>
<span><b>HTML</b> is a language used to make <b>websites.</b></span>
<span>It was developed by <i>CERN</i> employees in the early 90s.</span>
</p>
The script should then return the list of all created spans.
I already have some code which finds all the text nodes and stores them in a list along with their position across the whole document and their depth. You don't really need to understand that code to help me and its recursive structure can be a bit confusing. The first part I'm not sure how to do is figure out which elements should be included within the span.
function findTextNodes(node, depth = -1, start = 0) {
let list = [];
if (node.nodeType === Node.TEXT_NODE) {
list.push({ node, depth, start });
} else {
for (let i = 0; i < node.childNodes.length; ++i) {
list = list.concat(findTextNodes(node.childNodes[i], depth+1, start));
if (list.length) {
start += list[list.length-1].node.nodeValue.length;
}
}
}
return list;
}
I figure I'll make a string out of all the document, run the regex through it and use the list to find which nodes correspond to witch regex matches and then split the text nodes accordingly.
But an issue arrives when I have a document like this:
<p>
This program is not stable yet. Do not use this in production yet.
</p>
There's a sentence which starts outside of the <a> tag but ends inside it. Now I don't want the script to split that link in two tags. In a more complex document, it could ruin the page if it did. The code could either wrap two sentences together:
<p>
<span>This program is not stable yet. Do not use this in production yet.</span>
</p>
Or just wrap each part in its own element:
<p>
<span>This program is </span>
<a href="beta.html">
<span>not stable yet.</span>
<span>Do not use this in production yet.</span>
</a>
</p>
There could be a parameter to specify what it should do. I'm just not sure how to figure out when an impossible cut is about to happen, and how to recover from it.
Another issue comes when I have whitespace inside a child element like this:
<p>This is a <b>sentence. </b></p>
Technically, the regex match would end right after the period, before the end of the <b> tag. However, it would be much better to consider the space as part of the match and wrap it like this:
<p><span>This is a <b>sentence. </b></span></p>
Than this:
<p><span>This is a </span><b><span>sentence.</span> </b></p>
But that's a minor issue. After all, I could just allow extra white-space to be included within the regex.
I know this might sound like a "do it for me" question and its not the kind of quick question we see on SO on a daily basis, but I've been stuck on this for a while and it's for an open-source library I'm working on. Solving this problem is the last obstacle. If you think another SE site is best suited for this question, redirect me please.

Here are two ways to deal with this.
I don't know if the following will exactly match your needs. It's a simple enough solution to the problem, but at least it doesn't use RegEx to manipulate HTML tags. It performs pattern matching against the raw text and then uses the DOM to manipulate the content.
First approach
This approach creates only one <span> tag per match, leveraging some less common browser APIs.
(See the main problem of this approach below the demo, and if not sure, use the second approach).
The Range class represents a text fragment. It has a surroundContents function that lets you wrap a range in an element. Except it has a caveat:
This method is nearly equivalent to newNode.appendChild(range.extractContents()); range.insertNode(newNode). After surrounding, the boundary points of the range include newNode.
An exception will be thrown, however, if the Range splits a non-Text node with only one of its boundary points. That is, unlike the alternative above, if there are partially selected nodes, they will not be cloned and instead the operation will fail.
Well, the workaround is provided in the MDN, so all's good.
So here's an algorithm:
Make a list of Text nodes and keep their start indices in the text
Concatenate these nodes' values to get the text
Find matches over the text, and for each match:
Find the start and end nodes of the match, comparing the the nodes' start indices to the match position
Create a Range over the match
Let the browser do the dirty work using the trick above
Rebuild the node list since the last action changed the DOM
Here's my implementation with a demo:
function highlight(element, regex) {
var document = element.ownerDocument;
var getNodes = function() {
var nodes = [],
offset = 0,
node,
nodeIterator = document.createNodeIterator(element, NodeFilter.SHOW_TEXT, null, false);
while (node = nodeIterator.nextNode()) {
nodes.push({
textNode: node,
start: offset,
length: node.nodeValue.length
});
offset += node.nodeValue.length
}
return nodes;
}
var nodes = getNodes(nodes);
if (!nodes.length)
return;
var text = "";
for (var i = 0; i < nodes.length; ++i)
text += nodes[i].textNode.nodeValue;
var match;
while (match = regex.exec(text)) {
// Prevent empty matches causing infinite loops
if (!match[0].length)
{
regex.lastIndex++;
continue;
}
// Find the start and end text node
var startNode = null, endNode = null;
for (i = 0; i < nodes.length; ++i) {
var node = nodes[i];
if (node.start + node.length <= match.index)
continue;
if (!startNode)
startNode = node;
if (node.start + node.length >= match.index + match[0].length)
{
endNode = node;
break;
}
}
var range = document.createRange();
range.setStart(startNode.textNode, match.index - startNode.start);
range.setEnd(endNode.textNode, match.index + match[0].length - endNode.start);
var spanNode = document.createElement("span");
spanNode.className = "highlight";
spanNode.appendChild(range.extractContents());
range.insertNode(spanNode);
nodes = getNodes();
}
}
// Test code
var testDiv = document.getElementById("test-cases");
var originalHtml = testDiv.innerHTML;
function test() {
testDiv.innerHTML = originalHtml;
try {
var regex = new RegExp(document.getElementById("regex").value, "g");
highlight(testDiv, regex);
}
catch(e) {
testDiv.innerText = e;
}
}
document.getElementById("runBtn").onclick = test;
test();
.highlight {
background-color: yellow;
border: 1px solid orange;
border-radius: 5px;
}
.section {
border: 1px solid gray;
padding: 10px;
margin: 10px;
}
<form class="section">
RegEx: <input id="regex" type="text" value="[A-Z].*?\." /> <button id="runBtn">Highlight</button>
</form>
<div id="test-cases" class="section">
<div>foo bar baz</div>
<p>
<b>HTML</b> is a language used to make <b>websites.</b>
It was developed by <i>CERN</i> employees in the early 90s.
<p>
<p>
This program is not stable yet. Do not use this in production yet.
</p>
<div>foo bar baz</div>
</div>
Ok, that was the lazy approach which, unfortunately doesn't work for some cases. It works well if you only highlight across inline elements, but breaks when there are block elements along the way because of the following property of the extractContents function:
Partially selected nodes are cloned to include the parent tags necessary to make the document fragment valid.
That's bad. It'll just duplicate block-level nodes. Try the previous demo with the baz\s+HTML regex if you want to see how it breaks.
Second approach
This approach iterates over the matching nodes, creating <span> tags along the way.
The overall algorithm is straightforward as it just wraps each matching node in its own <span>. But this means we have to deal with partially matching text nodes, which requires some more effort.
If a text node matches partially, it's split with the splitText function:
After the split, the current node contains all the content up to the specified offset point, and a newly created node of the same type contains the remaining text. The newly created node is returned to the caller.
function highlight(element, regex) {
var document = element.ownerDocument;
var nodes = [],
text = "",
node,
nodeIterator = document.createNodeIterator(element, NodeFilter.SHOW_TEXT, null, false);
while (node = nodeIterator.nextNode()) {
nodes.push({
textNode: node,
start: text.length
});
text += node.nodeValue
}
if (!nodes.length)
return;
var match;
while (match = regex.exec(text)) {
var matchLength = match[0].length;
// Prevent empty matches causing infinite loops
if (!matchLength)
{
regex.lastIndex++;
continue;
}
for (var i = 0; i < nodes.length; ++i) {
node = nodes[i];
var nodeLength = node.textNode.nodeValue.length;
// Skip nodes before the match
if (node.start + nodeLength <= match.index)
continue;
// Break after the match
if (node.start >= match.index + matchLength)
break;
// Split the start node if required
if (node.start < match.index) {
nodes.splice(i + 1, 0, {
textNode: node.textNode.splitText(match.index - node.start),
start: match.index
});
continue;
}
// Split the end node if required
if (node.start + nodeLength > match.index + matchLength) {
nodes.splice(i + 1, 0, {
textNode: node.textNode.splitText(match.index + matchLength - node.start),
start: match.index + matchLength
});
}
// Highlight the current node
var spanNode = document.createElement("span");
spanNode.className = "highlight";
node.textNode.parentNode.replaceChild(spanNode, node.textNode);
spanNode.appendChild(node.textNode);
}
}
}
// Test code
var testDiv = document.getElementById("test-cases");
var originalHtml = testDiv.innerHTML;
function test() {
testDiv.innerHTML = originalHtml;
try {
var regex = new RegExp(document.getElementById("regex").value, "g");
highlight(testDiv, regex);
}
catch(e) {
testDiv.innerText = e;
}
}
document.getElementById("runBtn").onclick = test;
test();
.highlight {
background-color: yellow;
}
.section {
border: 1px solid gray;
padding: 10px;
margin: 10px;
}
<form class="section">
RegEx: <input id="regex" type="text" value="[A-Z].*?\." /> <button id="runBtn">Highlight</button>
</form>
<div id="test-cases" class="section">
<div>foo bar baz</div>
<p>
<b>HTML</b> is a language used to make <b>websites.</b>
It was developed by <i>CERN</i> employees in the early 90s.
<p>
<p>
This program is not stable yet. Do not use this in production yet.
</p>
<div>foo bar baz</div>
</div>
This should be good enough for most cases I hope. If you need to minimize the number of <span> tags it can be done by extending this function, but I wanted to keep it simple for now.

function parseText( element ){
var stack = [ element ];
var group = false;
var re = /(?!\s|$).*?(\.|$)/;
while ( stack.length > 0 ){
var node = stack.shift();
if ( node.nodeType === Node.TEXT_NODE )
{
if ( node.textContent.trim() != "" )
{
var match;
while( node && (match = re.exec( node.textContent )) )
{
var start = group ? 0 : match.index;
var length = match[0].length + match.index - start;
if ( start > 0 )
{
node = node.splitText( start );
}
var wrapper = document.createElement( 'span' );
var next = null;
if ( match[1].length > 0 ){
if ( node.textContent.length > length )
next = node.splitText( length );
group = false;
wrapper.className = "sentence sentence-end";
}
else
{
wrapper.className = "sentence";
group = true;
}
var parent = node.parentNode;
var sibling = node.nextSibling;
wrapper.appendChild( node );
if ( sibling )
parent.insertBefore( wrapper, sibling );
else
parent.appendChild( wrapper );
node = next;
}
}
}
else if ( node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.DOCUMENT_NODE )
{
stack.unshift.apply( stack, node.childNodes );
}
}
}
parseText( document.body );
.sentence {
text-decoration: underline wavy red;
}
.sentence-end {
border-right: 1px solid red;
}
<p>This is a sentence. This is another sentence.</p>
<p>This sentence has <strong>emphasis</strong> inside it.</p>
<p><span>This sentence spans</span><span> two elements.</span></p>

I would use "flat DOM" representation for such task.
In flat DOM this paragraph
<p>abc <a href="beta.html">def. ghij.</p>
will be represented by two vectors:
chars: "abc def. ghij.",
props: ....aaaaaaaaaa,
You will use normal regexp on chars to mark span areas on props vector:
chars: "abc def. ghij."
props: ssssaaaaaaaaaa
ssss sssss
I am using schematic representation here, it's real structure is an array of arrays:
props: [
[s],
[s],
[s],
[s],
[a,s],
[a,s],
...
]
conversion tree-DOM <-> flat-DOM can use simple state automata.
At the end you will convert flat DOM to tree DOM that will look like:
<p><s>abc </s><a href="beta.html"><s>def.</s> <s>ghij.</s></p>
Just in case: I am using this approach in my HTML WYSIWYG editors.

As everyone has already said, this is more of an academic question since this shouldn't really be the way you do it. That being said, it seemed like fun so here's one approach.
EDIT: I think I got the gist of it now.
function myReplace(str) {
myRegexp = /((^<[^>*]>)+|([^<>\.]*|(<[^\/>]*>[^<>\.]+<\/[^>]*>)+)*[^<>\.]*\.\s*|<[^>]*>|[^\.<>]+\.*\s*)/g;
arr = str.match(myRegexp);
var out = "";
for (i in arr) {
var node = arr[i];
if (node.indexOf("<")===0) out += node;
else out += "<span>"+node+"</span>"; // Here is where you would run whichever
// regex you want to match by
}
document.write(out.replace(/</g, "<").replace(/>/g, ">")+"<br>");
console.log(out);
}
myReplace('<p>This program is not stable yet. Do not use this in production yet.</p>');
myReplace('<p>This is a <b>sentence. </b></p>');
myReplace('<p>This is a <b>another</b> and <i>more complex</i> even <b>super complex</b> sentence.</p>');
myReplace('<p>This is a <b>a sentence</b>. Followed <i>by</i> another one.</p>');
myReplace('<p>This is a <b>an even</b> more <i>complex sentence. </i></p>');
/* Will output:
<p><span>This program is </span><span>not stable yet. </span><span>Do not use this in production yet.</span></p>
<p><span>This is a </span><b><span>sentence. </span></b></p>
<p><span>This is a <b>another</b> and <i>more complex</i> even <b>super complex</b> sentence.</span></p>
<p><span>This is a <b>a sentence</b>. </span><span>Followed <i>by</i> another one.</span></p>
<p><span>This is a </span><b><span>an even</span></b><span> more </span><i><span>complex sentence. </span></i></p>
*/

I have spent a long time implementing all of approaches given in this thread.
Node iterator
Html parsing
Flat Dom
For any of this approaches you have to come up with technique to split entire html into sentences and wrap into span (some might want words in span). As soon as we do this we will run into performance issues (I should say beginner like me will run into performance issues).
Performance Bottleneck
I couldn't scale any of this approach to 70k - 200k words and still do it in milli seconds. Wrapping time keeps increasing as words in pages keep increasing.
With complex html pages with combinations of text-node and different elements we soon run into trouble and with this technical debt keeps increasing.
Best approach : Mark.js (according to me)
Note: if you do this right you can process any number of words in millis.
Just use Ranges I want to recommend Mark.js and following example,
var instance = new Mark(document.body);
instance.markRanges([{
start: 15,
length: 5
}, {
start: 25:
length: 8
}]); /
With this we can treat entire body.textContent as string and just keep highlighting substring.
No DOM structure is modified here. And you can easily fix complex use cases and technical debt doesn't increase with more if and else.
Additionally once text is highlighted with html5 mark tag you can post process these tags to find out bounding rectangles.
Also look into Splitting.js if you just want split html documents into words/chars/lines and many more... But one draw back for this approach is that Splitting.js collapses additional spaces in the document so we loose little bit of info.
Thanks.

Related

Regex efficiency, better way to select text among html

This is about a Chrome Extension.
Suppose a user select any text on a page, then clicks a button to save it. Via window.getSelection() I can get that text without the underlying html markup.
I store that text. For demo purposes, let's say the text is:
"John was much more likely to buy if he knew the price beforehand"
The next time the user visits the page, I want to find that text on the page. The issue is, the html for that text is actually:
<b>John was much more likely to buy if he knew the price <span class="italic">beforehand</span></b>
The second issue is that this system needs to work even if the selection is dirty, i.e. it starts/ends mid DOM node.
What I've build is bit of a fat solution, so I am curious how I can make it more efficient and/or smaller. This is the whole thing:
text.split("").map(function(el, i, arr){
if(specials.includes(el)){
return "\\"+el;
}
return el;
})
.join("(?:\\s*<[^>]+>\\s*)*\\s*");
where text is the saved text and specials is
var specials = [
'/', '.', '*', '+', '?', '|',
'(', ')', '[', ']', '{', '}', '\\'
];
The process is:
Split text into single characters
For each character, check if it's a special char and if so, prepend it with \
Join all letters together with regEx that check if there's any whitespace or html tags inbetween
My question is, can it be done in a better way? I get the "bruteforcing" feeling with this solution and I don't know if it would actually cause lag on larger sites/selection texts.
Plus, it doesn't work for SPAs where text may update a bit after the DOM is ready.
Thank you for any input.
EDIT:
So initially I was using mark.js, which doesn't handle this at all, but not 12 hours after I posted this question the maintainer release v8.0.0 that uses NodeList and handles my use case. The feature is "acrossElements", located here.
create a Range object
set it so that it spans the entire document from start to end
check if the string of interest is in its toString()
clone range twice
apply binary search by moving the start/end points of the subranges into roughly their midpoint. this can be approximated by finding the first descendant with > 1 child nodes and then splitting the child list
goto 3
this should roughly take n log m steps where n is the document text length and m the number of nodes.
Build the entire text representation of the document manually from each node with nodeType of Node.TEXT_NODE, saving the node reference and its text's start/end positions relative to the overall string in an array. Do it just once as DOM is slow, and you might want to search for multiple strings. Otherwise the other answer might be much faster (without actual benchmarks it's a moot point).
Apply HTML whitespace coalescing rules.
Otherwise you'll end up with huge spans of spaces and newline characters.
For example, Range.toString() doesn't strip them, meaning you'd have to convert your string to a RegExp with [\s\n\r]+ instead of spaces and all other special characters like {}()[]|^$*.?+ escaped.
Anyway, it'd be wise to use the converted RegExp on document.body.textContent before proceeding (easy to implement, many examples on the net, thus not included below).
A simplified implementation for plain-string search follows.
function TextMap(baseElement) {
this.baseElement = baseElement || document.body;
var textArray = [], textNodes = [], textLen = 0, collapseSpace = true;
var walker = document.createTreeWalker(this.baseElement, NodeFilter.SHOW_TEXT);
while (walker.nextNode()) {
var node = walker.currentNode;
var nodeText = node.textContent;
var parentName = node.parentNode.localName;
if (parentName==='noscript' || parentName==='script' || parentName==='style') {
continue;
}
if (parentName==='textarea' || parentName==='pre') {
nodeText = nodeText.replace(/^(\r\n|[\r\n])/, '');
collapseSpace = false;
} else {
nodeText = nodeText.replace(/^[\s\r\n]+/, collapseSpace ? '' : ' ')
.replace(/[\s\r\n]+$/, ' ');
collapseSpace = nodeText.endsWith(' ');
}
if (nodeText) {
var len = nodeText.length;
textArray.push(nodeText);
textNodes.push({
node: node,
start: textLen,
end: textLen + len - 1,
});
textLen += len;
}
}
this.text = textArray.join('');
this.nodeMap = textNodes;
}
TextMap.prototype.indexOf = function(str) {
var pos = this.text.indexOf(str);
if (pos < 0) {
return [];
}
var index1 = this.bisectLeft(pos);
var index2 = this.bisectRight(pos + str.length - 1, index1);
return this.nodeMap.slice(index1, index2 + 1)
.map(function(info) { return info.node });
}
TextMap.prototype.bisect =
TextMap.prototype.bisectLeft = function(pos) {
var a = 0, b = this.nodeMap.length - 1;
while (a < b - 1) {
var c = (a + b) / 2 |0;
if (this.nodeMap[c].start > pos) {
b = c;
} else {
a = c;
}
}
return this.nodeMap[b].start > pos ? a : b;
}
TextMap.prototype.bisectRight = function(pos, startIndex) {
var a = startIndex |0, b = this.nodeMap.length - 1;
while (a < b - 1) {
var c = (a + b) / 2 |0;
if (this.nodeMap[c].end > pos) {
b = c;
} else {
a = c;
}
}
return this.nodeMap[a].end >= pos ? a : b;
}
Usage:
var textNodes = new TextMap().indexOf('<span class="italic">');
When executed on this question's page:
[text, text, text, text, text, text]
Those are text nodes, so to access corresponding DOM elements use the standard .parentNode:
var textElements = textNodes.map(function(n) { return n.parentNode });
Array[6]
  0: span.tag
  1: span.pln
  2: span.atn
  3: span.pun
  4: span.atv
  5: span.tag

Delete the character that immediately precedes an element

I have some text content that I am capturing from a third-party source, and which sometimes contains emoji, represented as image elements. I find each of the emoji image elements, and convert them to the unicode character for that emoji using the following code:
$(this).find('img.emoji').each(function(i){
emoji = decodeURIComponent($(this).data('textvalue'));
$(this).replaceWith(emoji);
});
However, the text immediately preceding each emoji image element contains an extra whitespace character, right before the emoji. See:
'[...] blah blah blah <img class="emoji" data-textvalue="%F0%9F%98%92">'
but it should be:
'[...] blah blah blah <img class="emoji" data-textvalue="%F0%9F%98%92">'
Because this is coming from a third-party source, I have no control over the original copy. But, I would like to remove that extra whitespace character in each instance of an emoji image (whether before or after converting it to unicode doesn't matter, but I suspect it may be easier to do before). How do I accomplish this?
One idea I had was to possibly get the character location of the beginning of the image element using javascript's str.indexOf, and then delete the character that was 1 less than that. But that would require converting the parent element to a string, and would cause problems if the intial text itself contained the phrase "<img", as unlikely as that would be.
Is there an easy way to do this that I am missing?
I'd break out of jQuery here and use native Javascript - it's better for cases where you've got tags splashed about text like that.
The best way to think about it (this is the browser's internal representation) is the bits of un-tagged text actually have a special invisible tag around them, so instead of
<div>I like ice-cream! <img src='ice-cream'></img> it's so yummy!</div>
You've really got
<div>
<textnode>I like ice-cream! </textnode>
<img src='ice-cream'></img>
<textnode> it's so yummy!</textnode>
</div>
Javascript will let you loop through all these different elements, and trim the ones that are just before <img> tags. Something like this should work (the get(0) just gets the jQuery element as a native javascript one):
var childNodes = $(this).get(0).childNodes;
//start at 1 instead of 0 - first node is irrelevant here
for (var i=1; i<childNodes.length; i++) {
var node = childNode[i];
if ( isNodeAnImg( node ) ) {
var previousNode = childNodes[i-1];
if ( isNodeATextNode() ) {
stripTrailingSpaceFrom( previousNode );
}
}
}
function isNodeAnImg(node) {
return (node.nodeType == Node.ELEMENT_NODE && node.nodeName == "img");
}
function isNodeATextNode(node) {
previousNode.nodeType == Node.TEXT_NODE
}
function stripTrailingSpaceFrom( node ) {
var text = node.textContent;
var lastCharacter = text.charAt( text.length - 1 );
if ( lastCharacter === ' ' ) {
node.textContent = text.substring(0, text.length - 1);
}
}

Find, Change multiple instances of text on page is Slow and Unresponsive, but Works

Edit: StackOverFlow is replacing Japanese Characters with translations upon saving my question.
This makes it look like I'm replacing the same text, with the same text.
The first item(of the dupes, below) should be Japanese text.
Using the scripts described here:
Find all instances of 'old' in a webpage and replace each with 'new', using a javascript bookmarklet
I've gone about trying to translate Yahoo Japan Auction pages
(yes, i know translation engines exist, but I have my reasons...)
example page:
http://auctions.search.yahoo.co.jp/search?auccat=&p=bose&tab_ex=commerce&ei=UTF-8&fr=bzr-prop
Have tried a couple scripts and While the scripts work, I must wait and click the "Unresponsive Script" a couple of times before the changes occur (10-20 seconds)
While I'm certain my implementation is buggy, also uncertain how to proceed.
The script can contain over 200 change items.
These below are culled for space considerations.
Version 1 Script:
function newTheOlds(node) {
node = node || document.body;
if(node.nodeType == 3) {
// Text node
node.nodeValue = node.nodeValue.split('Car,Bike').join('Car,Bike');
node.nodeValue = node.nodeValue.split('Current $').join('Current $');
node.nodeValue = node.nodeValue.split('Buy it Now').join('Buy it Now');
node.nodeValue = node.nodeValue.split('Bid').join('Bid');
node.nodeValue = node.nodeValue.split('Remaining Time').join('Remaining Time');
node.nodeValue = node.nodeValue.split('Popular-Newest').join('Popular-Newest');
} else {
var nodes = node.childNodes;
if(nodes) {
var i = nodes.length;
while(i--) newTheOlds(nodes[i]);
}
}
}
newTheOlds();
Version 2 Script:
function htmlreplace(a, b, element) {
if (!element) element = document.body;
var nodes = element.childNodes;
for (var n=0; n<nodes.length; n++) {
if (nodes[n].nodeType == Node.TEXT_NODE) {
var r = new RegExp(a, 'gi');
nodes[n].textContent = nodes[n].textContent.replace(r, b);
} else {
htmlreplace(a, b, nodes[n]);
}
}
}
htmlreplace('Car,Bike', 'Car,Bike');
htmlreplace('Current $', 'Current $');
htmlreplace('Buy it Now', 'Buy it Now');
htmlreplace('Bid', 'Bid');
htmlreplace('Remaining Time', 'Remaining Time');
htmlreplace('Popular-Newest', 'Popular-Newest');
htmlreplace('Display', 'Display');
htmlreplace('Music', 'Music');
htmlreplace('Hobby', 'Hobby');
htmlreplace('Books/Mags', 'Books/Mags');
htmlreplace('Antiques', 'Antiques');
htmlreplace('Comics/Anime', 'Comics/Anime');
htmlreplace('Movie/Video', 'Movie/Video');
htmlreplace('Computers', 'Computers');
htmlreplace('Others', 'Others');
Should I be trying another technique?
Thanks,
Woody
While I'm certain my implementation is buggy, also uncertain how to proceed.
Replace multiple node.nodeValue = an assignment to a documentFragment
Move the strings in the multiple htmlreplace calls into a key/value object literal
Replace the loop with an Array.prototype.map call over the childNodes of the documentFragment
Replace matches using a replacer callback which references the object literal
References
createDocumentFragment
DOM documentFragments
Alternatives to innerHTML
The tiny table sorter - or - you can write LINQ in JavaScript

Trying to replace HTML by cloning nodes but getting strange results

I'm trying to add <abbr> tags to acronyms found on a website. I'm running this as a Chrome Extension but I'm fairly certain the problem is within the javascript itself and doesn't have much to do with the Chrome stuff (I'll include the source just in case anyways)
I should mention that I'm using a lot of code from this link which was suggested on another answer. Unfortunately I'm getting unexpected results as my end goal differs a bit from what is discussed there.
First I have an array of acronyms (shortened here, I included the whole thing on JSFiddle)
"ITPHR": "Inside-the-park home run:hits on which the batter successfully touched all four bases, without the contribution of a fielding error or the ball going outside the ball park.",
"pNERD": "Pitcher's NERD: expected aesthetic pleasure of watching an individual pitcher",
"RISP": "Runner In Scoring Position: a breakdown of the batter's batting average with runners in scoring position, which include runners at second and third bases.",
"SBA/ATT": "Stolen base attempts: total number of times the player has attempted to steal a base (SB+CS)",
then the matchText() function from the previously linked artile
var matchText = function (node, regex, callback, excludeElements) {
excludeElements || (excludeElements = ['script', 'style', 'iframe', 'canvas']);
var child = node.firstChild;
do {
switch (child.nodeType) {
case 1:
if (excludeElements.indexOf(child.tagName.toLowerCase()) > -1) {
continue;
}
matchText(child, regex, callback, excludeElements);
break;
case 3:
child.data.replace(regex, function (all) {
var args = [].slice.call(arguments),
offset = args[args.length - 2],
newTextNode = child.splitText(offset);
newTextNode.data = newTextNode.data.substr(all.length);
callback.apply(window, [child].concat(args));
child = newTextNode;
});
break;
}
} while (child = child.nextSibling);
return node;
}
and finally my code that cycles through the array of acronyms and searches all the terms one by one (this might not be the optimal way of doing things, please let me know if you have a better idea)
var abbrList = Object.keys(acronyms);
for (var i = 0; i < abbrList.length; i++) {
var abbrev = abbrList[i];
abbrevSearch = abbrev.replace('%', '\\%').replace('+', '\\+').replace('/', '\\/');
console.log("Looking for " + abbrev);
matchText(document.body.getElementsByTagName("*"), new RegExp("\\b" + abbrevSearch + "\\b", "g"), function (node, match, offset) {
var span = document.createElement("abbr");
// span.className = "sabrabbr"; // If someone decides to style them
span.setAttribute("title", acronyms[abbrev].replace(''', '\''));
span.textContent = match;
node.parentNode.insertBefore(span, node.nextSibling);
});
}
As a reference here are the Chrome-specific files:
manifest.json
{
"name": "SABR Acronyms",
"version": "0.1",
"manifest_version": 2,
"description": "Adds tooltips with a definition to commonly used acronyms in baseball.",
"icons": {
"16" : "images/16.png",
"48" : "images/48.png",
"128" : "images/128.png"
},
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": "images/16.png",
"default_title": "SABR Acronyms"
},
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["content.js","jquery.min.js"],
"css": ["sabr.css"]
}
],
"web_accessible_resources": ["content.js", "sabr.js", "sabr.css","jquery.min.js","jquery-2.0.3.min.map"]
}
content.js
var s = document.createElement('script');
s.src = chrome.extension.getURL('sabr.js');
(document.head||document.documentElement).appendChild(s);
s.onload = function() {
s.parentNode.removeChild(s);
};
I uploaded everything on JSFiddle since it's the easiest way to see the code in action. I copied the <body>...</body> of a page containing an article with a few of the acronyms being used. A lot of them should be picked up but aren't. Exact matches are also picked up but not all the time. There also seems to be a problem single/2-letter acronyms (such as IP in the table). The regular expression is quite simple, I thought \b would do the trick.
Thanks!
There were a couple of issues with your code (or maybe a little more).
Chrome detects word-boundaries in its own way, so \b does not work as expected (e.g. a . is considered part of a word).
You were using the global modifier which returned the indexes of all the matches it found. But when handling each match, you modified the content of child.data, so the indices that referred to the original child.data were rendered useless. This problem would only come up whenever there were more than 1 matches in a single TextNode. (Note that once this error caused an exception to be raised, execution was aborted, so no further TextNodes were processed.)
The acronyms were searched for (and replaced) in the order of appearance in the acronym list. This could lead to cases, where only a substring of an acronym would be recognised as another acronym and incorrectly replaced. E.g. if ERA was seached for before ERA+, all ERA+ occurrences in the DOM would be replaced by <abbr ...>ERA</abbr>+ and would not be recognised as ERA+ occurrences later on.
Similarly to the above problem, a substring of an already processed acronym, could be subsequently recognised as another acronym and pertially replaced. E.g. if ERA+ was searched for before ERA the following would happen:
ERA+
-> <abbr (title_for_ERA+)>ERA+</abbr>
-> <abbr (title_for_ERA+)><abbr (title_for_ERA)>ERA</abbr>+</abbr>
Your one-letter "acronyms" would also match characters they shouldn't (e.g. E in E-mail, G in Paul G. etc).
(Among many possible ways) I chose to address the above problems like this:
For (1):
Instead of using \b...\b I used (^|[^A-Za-z0-9_])(...)([^A-Za-z0-9_]|$).
This will look for one character that is not a word character before and after our acronym under search (or settle for string start (^) or end ($) respectively). Since the matched characters (if any) before and after the actual acronym match need to be put back in the regular TextNodes, 3 backreferences are created and handled appropriately in the replace callback (see code below).
For (2):
I removed the global modifier and matched one occurrence at a time.
This also required a slight modification, so that the new TextNode, created with the part of child.data after the current match, is subsequently searched as well.
For (3):
Before starting the search and replace operations I ordered the array of acronyms by decreasing length, so longer acronyms were search for (and replaced) before sorter acronyms (which could possible be a substring of the former). E.g. ERA+ is always replaced before ERA, IP/GS is always replaced before IP etc.
(Note that this solves problem (3), but we still have to deal with (4).)
For (4):
Every time I create a new <abbr> node I add a class to it. Later on, when I encounter an element with that special class, I skip it (as I don't want any replacements to happen in a substring of an already matched acronym).
For (5):
Well, I am good, but I am not Jon Skeet :)
There is not much you can do about it, unless you want to bring on some AI, but I suppose it is not much of a problem either (i.e. you can live with it).
(As already mentioned the above solutions are neither the only ones available and probably nor optimal.)
That said, here is my version of the code (with a few more miror (for the most part stylistic) changes):
var matchText = function (node, regex, callback, excludeElements) {
excludeElements
|| (excludeElements = ['script', 'style', 'iframe', 'canvas']);
var child = node.firstChild;
if (!child) {
return;
}
do {
switch (child.nodeType) {
case 1:
if ((child.className === 'sabrabbr') ||
(excludeElements.indexOf(
child.tagName.toLowerCase()) > -1)) {
continue;
}
matchText(child, regex, callback, excludeElements);
break;
case 3:
child.data.replace(regex, function (fullMatch, g1, g2, g3, idx,
original) {
var offset = idx + g1.length;
newTextNode = child.splitText(offset);
newTextNode.data = newTextNode.data.substr(g2.length);
callback.apply(window, [child, g2]);
child = child.nextSibling;
});
break;
}
} while (child = child.nextSibling);
return node;
}
var abbrList = Object.keys(acronyms).sort(function(a, b) {
return b.length - a.length;
});
for (var i = 0; i < abbrList.length; i++) {
var abbrev = abbrList[i];
abbrevSearch = abbrev.replace('%', '\\%').replace('+', '\\+').replace('/', '\\/');
console.log("Looking for " + abbrev);
var regex = new RegExp("(^|[^A-Za-z0-9_])(" + abbrevSearch
+ ")([^A-Za-z0-9_]|$)", "");
matchText(document.body, regex, function (node, match) {
var span = document.createElement("abbr");
span.className = "sabrabbr";
span.title = acronyms[abbrev].replace(''', '\'');
span.textContent = match;
node.parentNode.insertBefore(span, node.nextSibling);
});
}
For the noble few that made it this far, there is, also, this short demo.

Use regex to interpret different type of variable and do a find and replace with jquery

ok i have difficulty to understand the rejex and how it work, I try to do a basic dictionnary/glossary for a web site and i past too many time on it already.
There my code :
// MY MULTIPLE ARRAY
var myDictionnary = new Object();
myDictionnary.myDefinition = new Array();
myDictionnary.myDefinition.push({'term':"*1", 'definition':"My description here"});
myDictionnary.myDefinition.push({'term':"word", 'definition':"My description here"});
myDictionnary.myDefinition.push({'term':"my dog doesn't move", 'definition':"My description here"});
// MY FUNCTION
$.each(myDictionnary.myDefinition, function(){
var myContent = $('#content_right').html();
var myTerm = this.term;
var myRegTerm = new RegExp(myTerm,'g');
$('#content_right').html(myContent.replace(myRegTerm,'<span class="tooltip" title="'+this.definition+'"> *'+this.term+'</span>'));
});
I create my array and for each result i search in my div#content_right for the same content and replace it by span with title and tooltip. I put my regex empty to not confuse with what i have try before.
In my array 'term' you can see what kind of text i will research. It work for searching normal text like 'word'.
But for the regular expression like 'asterix' it bug, when i find a way to past it, he add it to text, i try many way to interpret my 'asterix' like a normal caracter but it doesn't work.
There what i want :
Interpret the variable literally whatever the text inside my var 'myTerm'. It this possible? if it not, what kind solution i shouldn use.
Thank in advance,
P.S. sorry for my poor english...(im french)
Alex
* is a special character in a Regex, meanining "0 or more of the previous character". Since it's the first character, it is invalid and you get an error.
Consider implementing preg_quote from PHPJS to escape such special characters and make them valid for use in a regex.
HOWEVER, the way you are doing this is extremely bad. Not only because you're using innerHTML multiple times, but because what if you come across something like this?
Blah blah blah <img src="blah/word/blah.png" />
Your resulting output would be:
Blah blah blah <img src="blah/<span class="tooltip" title="My description here"> *word</span>/blah.png" />
The only real way to do what you're attempting is to specifically scan through the text nodes, then use .splitText() on the text node to extract the word match, then put that into its own <span> tag.
Here's an example implementation of the above explanation:
function definitions(rootnode) {
if( !rootnode) rootnode = document.body;
var dictionary = [
{"term":"*1", "definition":"My description here"},
{"term":"word", "definition":"My description here"},
{"term":"my dog doesn't move", "definition":"My description here"}
], dl = dictionary.length, recurse = function(node) {
var c = node.childNodes, cl = c.length, i, j, s, io;
for( i=0; i<cl; i++) {
if( c[i].nodeType == 1) { // ELEMENT NODE
if( c[i].className.match(/\btooltip\b/)) continue;
// ^ Exclude elements that are already tooltips
recurse(c[i]);
continue;
}
if( c[i].nodeType == 3) { // TEXT NODE
for( j=0; j<dl; j++) {
if( (io = c[i].nodeValue.indexOf(dictionary[j].term)) > -1) {
c[i].splitText(io+dictionary[j].term.length);
c[i].splitText(io);
cl += 2; // we created two new nodes
i++; // go to next sibling, the matched word
s = document.createElement('span');
s.className = "tooltip";
s.title = dictionary[j].definition;
node.insertBefore(s,c[i]);
i++;
s.appendChild(c[i]); // place the text node inside the span
// Note that now when i++ it will point to the tail,
// so multiple matches in the same node are possible.
}
}
}
}
};
recurse(rootnode);
}
Now you can call definitions() to replace all matches in the document, or something like definitions(document.getElementById("myelement")) to only replace matches in a certain container.
By adding another variable, it will fix the problem:
for( j=0; j<dl; j++) {
debutI =i;
if((io =c[i].nodeValue.indexOf(dictionary[j].term)) != -1) {
c[i].splitText(io+dictionary[j].term.length);
c[i].splitText(io);
cl += 2; // we created two new nodes
i++; // go to next sibling, the matched word
s = document.createElement('span');
s.className = "tooltip";
s.title = dictionary[j].definition;
node.insertBefore(s,c[i]);
i++;
s.appendChild(c[i]); // place the text node inside the span
// Note that now when i++ it will point to the tail,
// so multiple matches in the same node are possible.
}
i = debutI;
}
Comme ça, on n'aura pas à mettre tous les spans partout dans le site à la main. >_>

Categories