I have HTML markup in a file. I intend picking out that markup, replacing the placeholders in it per the data set, and returning a merged string. I could simply use a server-side template (I did previously) but cannot afford it now as some client-side code requires same markup for front end stuff i.e code beyond public/. Presently, the server just hangs whenever it runs into the exec function and throws nor console.errors nothing.
The code looks like this
var availableFoodsString = "",
regexCb = function (dataSet, flag, indexPage) {
return function(match, $1, index) {
if (indexPage == undefined && dataSet["username"] != undefined) {
dataSet["username_search"] = dataSet["username"];
}
if (dataSet[$1] != undefined) return dataSet[$1];
else if (flag == "EMPTY") return "";
else if (flag == "MATCH") return match;
}
};
foodsModel.find({availableToday: true}, function(err, docs) {
if (err) throw err;
docs.forEach(function (doc) {
doc = doc.toObject();
doc.image = "/images/food/" + doc.name + ".jpg";
var template = /(<div class="food-menu">(\s*.*)*<\/div>)/gi.exec(fs.readFileSync("public/index.html").toString())[0]
availableFoodsString += template.replace(/\{\{(\w+)\}\}/gi, regexCb(doc))
});
});
In essence, I need availableFoodsString at the end of the day as an additional value to be rendered to another placeholder i.e render({available: availableFoodsString}).
The public/index.html is a normal HTML with this somewhere in between
{{name}}
{{price}}
add to cart
So, some jQuery code also needs this much coveted markup at some point after DOM is fully loaded, while doc from the model contain name and price filler variables.
The foodsModel.find() function is async, yes, but it is called inside the http.createServer function by the database opening connection callback so the variable is definitely loaded at that point.
I have seen some other solutions such as this and related questions but they all either involve imploring some external module from npm, or writing a new file from the matched markup, before replacing and merging into the desired variable. I know there has to be a way to achieve this without any of those.
The problem had to do with my regex. The second parenthesis was guilty of something called catastrophic backtracking. Which means the match was greedy in a way that put the interpreter through hell i.e. taking back more than needed instead of inversely giving back as needed. I knocked up a few spots on the regex and everything works seamlessly now.
The old code stayed the same, just the regex changed from this:
/(<div class="food-menu">(\s*.*)*<\/div>)/gi
to this:
/(<div class="food-menu">(\s+.*)+<\/div>)/g
For some reason, the previous regex appeared to match the file string seamlessly, first time I tested it, but was brutally unforgiving once I plugged it in real code.
Related
I've created a script (my first) that accepts input text and then runs about 30 regular expressions on the text, outputting discovered values into an HTML table. The purpose is for me to be able to paste in text containing specification information for products and have them uniformly outputted so I can paste them into a spreadsheet.
I've had it working really well and I've been tuning the regexes as I've pasted data with different variations/layouts in. However, I've hit an impasse and need some assistance:
One of the regular expressions searches for the product part number (sku) and returns the value in a column. Some of the source data includes more than one match because there are regional variations to the products. In all cases the first match is the only one that I want. I've tested the RegEx on RegEx101 and it returns the first match only with the 'global' flag switched off. However, the same RegEx running in my script causes it to return console messages infinitely before crashing. It's immediately unresponsive so I can't see any error messages.
Here's a sample of the regex section in my script. sku being the one that's causing problems:
let wallMountable = /(?<wallmountable>[Ww]all [Mm]ount)/mg;
let sku = /^.*\((?<sku>\d\d\w\w[\d\w]+?).+?\).*$/m;
function parseData() {
// Execute the Regular Expressions on the text in 'specSheet'
let specSheet = document.getElementById("specSheet").value;
let wallMountableToken = wallMountable.exec(specSheet);
let skuToken = sku.exec(specSheet);
do {
// If Token isn't null, then test to see if the regex group value is undefined. If either are true, do nothing, otherwise write the value to the document.
if (wallMountableToken !== null) {
if (wallMountableToken.groups.wallmountable !== undefined)
{document.write(`${wallMountableToken.groups.wallmountable}`);}
else {}
}
else {}
if (skuToken !== null) {
if (skuToken.groups.sku !== undefined)
{document.write(`${skuToken.groups.sku}`);}
else {}
}
else {}
}
// Loop through the script until a condition is met.
while (
(wallMountableToken = wallMountable.exec(specSheet)) !== null,
(skuToken = sku.exec(specSheet)) !== null
);
}
The while loop may not be necessary and in truth I'm not entirely sure what purpose it serves here, but it seemed to consistently appear in the reference material I was studying. I have included it here because it's part of the script, but please note that the script works if I change the second regex to /mg instead of /m, however, it returns multiple values and I only want it to return the first capture.
I know there's a lot wrong with the script, but this particular question is about why the regex is causing an infinite loop, so any help toward that goal is much appreciated.
I'm awful with RegEx to begin with. Anyway I tried my best and think I got pretty far, but I'm not exactly there yet...
What I have:
A javascript source file that I need to process in Node.js. Can look like that:
var str = "require(test < 123)\n\nrequire(test2 !== test)\n\nfunction(dontReplaceThisParam) {\n console.log(dontReplaceThisParam)\n}";
What I came up with:
console.log(str.replace(/\(\s*([^)].+?)\s*\)/g, 'Debug$&, \'error_1\''))
Theres a few problems:
I want that the string error gets inside the paranthesis so it acts as a second parameter.
All function calls, or I think even everything with paranthesis will be replaced. But only function calls to "require(xxx)" should be touched.
Also, the error codes should somehow increment if possible...
So a string like "require(test == 123)" should convert to "requireDebug(test == 123, 'error_N')" but only calls to "require"...
What currently gets outputted by my code:
requireDebug(test < 123), 'error_1'
requireDebug(test2 !== test), 'error_1'
functionDebug(dontReplaceThisParam), 'error_1' {
console.logDebug(dontReplaceThisParam), 'error_1'
}
What I need:
requireDebug(test < 123, 'error_1')
requireDebug(test2 !== test, 'error_2')
function(dontReplaceThisParam) {
console.log(dontReplaceThisParam)
}
I know I could just do things like that manually but we're talking here about a few hundred source files. I also know that doing such things is not a very good way, but the debugger inside the require function is not working so I need to make my own debug function with an error code to locate the error. Its pretty much all I can do at the moment...
Any help is greatly appreciated!
Start the regex with require, and since you need an incrementing counter, pass a function as the second arg to replace, so that you can increment and insert the counter for each match.
var str = "require(test < 123)\n\nrequire(test2 !== test)\n\nfunction(dontReplaceThisParam) {\n console.log(dontReplaceThisParam)\n}";
var counter = 0;
console.log(str.replace(/require\(\s*([^)].+?)\s*\)/g, (s, g2) =>
`requireDebug(${g2}, \'error_${++counter}\')`
));
Other than that, your code was unaltered.
I'm new to jQuery and I am trying to understand a bit of code to be able to apply a similar concept in my coursework.
$(function(){
$(".search").keyup(function() {
var searchid = $(this).val();
var dataString = \'search=\'+ searchid;
if(searchid!=\'\') {
}
});
})(jQuery);
What is the dataString variable trying to do?
There are quite a few things that seem "off" with this snippet of code, which I'll address below.
What is this code doing?
It looks like some basic functionality that might be used to build a search querystring that is passed onto some AJAX request that will search for something on the server.
Basically, you'll want to build a string that looks like search={your-search-term}, which when posted to the server, the search term {your-search-term} can be easily identified and used to search.
Noted Code Issues
As mentioned, there are a few issues that you might want to consider changing:
The Use of Escaped Quotes (i.e. \') - You really don't need to escape these as they aren't present within an existing string. Since you are just building a string, simply replace them with a normal ' instead. Without knowing more about your complete scenario, it's difficult to advise further on this.
Checking String Length - Your existing code once again checks if the searchId is an empty string, however you may want to consider checking the length to see if it actually empty via searchId.length != 0, you could also trim this as well (i.e. searchId.trim().length != 0).
Consider A Delay (Optional) - At present, your current code will be executed every time a key is pressed, which can be good (or bad) depending on your needs. If you are going to be hitting the server, you may consider adding a delay to your code to ensure the user has stopped typing before hitting the server.
You can see some of these changes implemented below in the annotated code snippet:
// This is a startup function that will execute when everything is loaded
$(function () {
// When a keyup event is triggered in your "search" element...
$(".search").keyup(function () {
// Grab the contents of the search box
var searchId = $(this).val();
// Build a data string (i.e. string=searchTerm), you didn't previously need the
// escaping slashes
var dataString = 'search=' + searchId;
// Now check if actually have a search term (you may prefer to check the length
// to ensure it is actually empty)
if(searchId.length != 0) {
// There is a search, so do something here
}
}
}
I'm writing a native javascript app for android, and it involves a short regex call. The following function should select the inner string from a block of html, shorten it if it's too long, then add it back into the html block. (Most of the time anyway -- I couldn't write a perfect html parser.)
My problem is that on certain inputs, this code crashes on the command "str.search(regex)". (It prints out the alert statement right before the command, "Pre-regex string: ", but not the one afterwards, "Pos: ".) Since the app is running on the android, I can't see what error is being thrown.
Under what circumstances could javascript code possibly crash when calling "search()" on a string? There's nothing wrong with the regex itself, because this works most of the time. I can't duplicate the problem either: If I copy the string character by character and feed it into the function outside of the app, the function doesn't crash. Inside the app, the function crashes on the same string.
Here is the function. I tabbed the alert calls differently to make them easier to see.
trimHtmlString: function(str, len, append) {
append = (append || '');
if(str.charAt(0) !== '<') {
if(str.length > len) return str.substring(0, len) + append;
return str;
}
alert('Pre-regex string: '+str);
var regex = />.+(<|(^>)$)/;
var innerStringPos = str.search(regex);
if(innerStringPos == -1) return str;
alert('Pos: '+innerStringPos);
var innerStringArray = str.match(regex);
alert('Array: '+innerStringArray);
var innerString = innerStringArray[0];
alert('InnerString: '+innerString);
var innerStringLen = innerString.length;
innerString = innerString.substring(1, innerString.length-1);
alert(innerString.length);
if(innerString.length > len) innerString = innerString.substring(0, len) + append;
return str.substring(0, innerStringPos+1)
+ innerString
+ str.substring(innerStringPos+innerStringLen-1, str.length);
}
First, do not parse HTML with regular expressions. You have been warned. Next, make sure you are always passing an actual string. Calling .search() on null or undefined will cause problems. Maybe you can provide an example input that is crashing?
IMO, your regex generate an error because you use the begin anchor ^ after the begin of the string. For example:
<span>rabbit</span> don't generate an error
<span>rabbit generate an error
the reason is that the first use the first alternation, ie : <
and the second use the second alternation: (^>)$ that have no sense because your pattern has already begun with >.+
For example, if you want to obtain the word "rabbit" in the two precedent cases, you can use: /(?<=>)[^<]+/ instead
However, using a DOM way will be safer.
So I am trying to make a string out of a string and a passed variable(which is a number).
How do I do that?
I have something like this:
function AddBorder(id){
document.getElementById('horseThumb_'+id).className='hand positionLeft'
}
So how do I get that 'horseThumb' and an id into one string?
I tried all the various options, I also googled and besides learning that I can insert a variable in string like this getElementById("horseThumb_{$id}") <-- (didn't work for me, I don't know why) I found nothing useful. So any help would be very appreciated.
Your code is correct. Perhaps your problem is that you are not passing an ID to the AddBorder function, or that an element with that ID does not exist. Or you might be running your function before the element in question is accessible through the browser's DOM.
Since ECMAScript 2015, you can also use template literals (aka template strings):
document.getElementById(`horseThumb_${id}`).className = "hand positionLeft";
To identify the first case or determine the cause of the second case, add these as the first lines inside the function:
alert('ID number: ' + id);
alert('Return value of gEBI: ' + document.getElementById('horseThumb_' + id));
That will open pop-up windows each time the function is called, with the value of id and the return value of document.getElementById. If you get undefined for the ID number pop-up, you are not passing an argument to the function. If the ID does not exist, you would get your (incorrect?) ID number in the first pop-up but get null in the second.
The third case would happen if your web page looks like this, trying to run AddBorder while the page is still loading:
<head>
<title>My Web Page</title>
<script>
function AddBorder(id) {
...
}
AddBorder(42); // Won't work; the page hasn't completely loaded yet!
</script>
</head>
To fix this, put all the code that uses AddBorder inside an onload event handler:
// Can only have one of these per page
window.onload = function() {
...
AddBorder(42);
...
}
// Or can have any number of these on a page
function doWhatever() {
...
AddBorder(42);
...
}
if(window.addEventListener) window.addEventListener('load', doWhatever, false);
else window.attachEvent('onload', doWhatever);
In javascript the "+" operator is used to add numbers or to concatenate strings.
if one of the operands is a string "+" concatenates, and if it is only numbers it adds them.
example:
1+2+3 == 6
"1"+2+3 == "123"
This can happen because java script allows white spaces sometimes if a string is concatenated with a number. try removing the spaces and create a string and then pass it into getElementById.
example:
var str = 'horseThumb_'+id;
str = str.replace(/^\s+|\s+$/g,"");
function AddBorder(id){
document.getElementById(str).className='hand positionLeft'
}
It's just like you did. And I'll give you a small tip for these kind of silly things: just use the browser url box to try js syntax. for example, write this: javascript:alert("test"+5) and you have your answer.
The problem in your code is probably that this element does not exist in your document... maybe it's inside a form or something. You can test this too by writing in the url: javascript:alert(document.horseThumb_5) to check where your mistake is.
Another way to do it simpler using jquery.
sample:
function add(product_id){
// the code to add the product
//updating the div, here I just change the text inside the div.
//You can do anything with jquery, like change style, border etc.
$("#added_"+product_id).html('the product was added to list');
}
Where product_id is the javascript var and$("#added_"+product_id) is a div id concatenated with product_id, the var from function add.
Best Regards!