Develop Reference

URL parameters are reordered when using anchor links with Inheriting UTMS

I am using a javascript on my site, which always inherits the UTM parameters to the links on the site.
However, this is not working, when the links are anchor links to a section of the site and the link the visitor used to visit the page contains the "gclid" parameter from google.
For example:
A visitor uses this link to visit a site:
domain.com?utm_source=test&utm_medium=test&utm_campaign=test&gclid=12345
The button link on the site with the anchor link will look like the following:
domain.com&gclid=12345?utm_source=test&utm_medium=test&utm_campaign=test#anchor
For some reason the "&gclid" part changes its position.
I've tested it with a link without an anchor and in this case the "gclid" parameter doesn't get inherited and the link works.
Of course, the second domain isn't working anymore and leads to a 404 error.
Does someone have an idea what could be the cause for this?
This is the javascript I am using to inherit the UTMs:
(function() {
var utmInheritingDomain = "grundl-institut.de"
utmRegExp = /(\&|\?)utm_[A-Za-z]+=[A-Za-z0-9]+/gi,
links = document.getElementsByTagName("a"),
utms = [
"utm_medium={{URL - utm_medium}}",
"utm_source={{URL - utm_source}}",
"utm_campaign={{URL - utm_campaign}}"
];
for (var index = 0; index < links.length; index += 1) {
var tempLink = links[index].href,
tempParts;
if (tempLink.indexOf(utmInheritingDomain) > 0) {
tempLink = tempLink.replace(utmRegExp, "");
tempParts = tempLink.split("#");
if (tempParts[0].indexOf("?") < 0) {
tempParts[0] += "?" + utms.join("&");
} else {
tempParts[0] += "&" + utms.join("&");
}
tempLink = tempParts.join("#");
}
links[index].href = tempLink;
}
}());
EDIT: It seems like the following script don`t causes this problem:
<script>
(function() {
var domainsToDecorate = [
'domain.com',
],
queryParams = [
'utm_medium',
'utm_source',
'utm_campaign',
]
var links = document.querySelectorAll('a');
for (var linkIndex = 0; linkIndex < links.length; linkIndex++) {
for (var domainIndex = 0; domainIndex < domainsToDecorate.length; domainIndex++) {
if (links[linkIndex].href.indexOf(domainsToDecorate[domainIndex]) > -1 && links[linkIndex].href.indexOf("#") === -1) {
links[linkIndex].href = decorateUrl(links[linkIndex].href);
}
}
}
function decorateUrl(urlToDecorate) {
urlToDecorate = (urlToDecorate.indexOf('?') === -1) ? urlToDecorate + '?' : urlToDecorate + '&';
var collectedQueryParams = [];
for (var queryIndex = 0; queryIndex < queryParams.length; queryIndex++) {
if (getQueryParam(queryParams[queryIndex])) {
collectedQueryParams.push(queryParams[queryIndex] + '=' + getQueryParam(queryParams[queryIndex]))
}
}
return urlToDecorate + collectedQueryParams.join('&');
}
// borrowed from https://stackoverflow.com/questions/831030/
// a function that retrieves the value of a query parameter
function getQueryParam(name) {
if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(window.location.search))
return decodeURIComponent(name[1]);
}
})();
</script>

You really should not change URLs with regexp and string manipulation.
Here is the recommended way
const url = new URL(location.href); // change to tempLink
utms = [
"utm_medium=med",
"utm_source=src",
"utm_campaign=camp"
];
utms.forEach(utm => url.searchParams.set(...utm.split("=")))
console.log(url.toString())

How do I style this code using html and css?

The code below is for listing blogger posts within a Label Name, if the post has the specific Label Name it will be shown in this list. I would like to be able to change the appearance of how everything is displayed by changing where the post image would look, and where the title would look, change background color, add borders, shadows change the font etc ...(I know how to change the appearance with css, but I do not know how to integrate the code below with css and html) At the moment the code shows the title and the right of the title the image.
var startIndex = 1;
var maxResults = 5;
var allResults = [];
function sendQuery12()
{
var scpt = document.createElement("script");
scpt.src = "https://levon-ltr.blogspot.com//feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function printArrayResults(root)
{
//Sort Alphebetically
allResults.sort(function(a, b){
var a_string = a.children[0].textContent ;
var b_string = b.children[0].textContent ;
if(a_string < b_string) return -1;
if(a_string > b_string) return 1;
return 0;
})
var elmt = document.getElementById("postList12");
for (index = 0; index < allResults.length; index++) {
elmt.appendChild(allResults[index]);
}
}
function processPostList12(root)
{
var elmt = document.getElementById("postList12");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0)
{
for (var i = 0; i < feed.entry.length; i++)
{
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t;
if( entry.media$thumbnail != undefined ){
var imageThumb = entry.media$thumbnail.url ;
} else {
var imageThumb = 'https://i.imgur.com/PqPqZQN.jpg' ;
}
for (var j = 0; j < entry.link.length; j++)
{
if (entry.link[j].rel == "alternate")
{
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0)
{
var liE = document.createElement("li");
var a1E = document.createElement("a");
var postImage = document.createElement("img");
a1E.href = url;
a1E.textContent = title;
postImage.src = imageThumb;
liE.appendChild(a1E);
liE.appendChild(postImage);
//elmt.appendChild(liE);
allResults.push(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults)
{
startIndex += maxResults;
sendQuery12();
} else {
printArrayResults();
}
}
}
sendQuery12();
<div>
<ul id="postList12"></ul>
</div>

This creates stuff you can style with CSS. For example:
#postList12 li {
border: 1px solid blue;
}
Use the inspector in your browser to see what it makes. If you want to change the order of elements or add new ones you’ll have to edit the script to do that.

How to add space with continuous long string

How to add space with continuously long string if there is no space in string after certain characters using JavaScript
For example string is
Helocsdnsajdnsajndjksandjks addwdwdwdnsajkkwfjnwkjqnf
wkjnfkjewnfefewfefewdd
and we want space after 10 characters
Result should be
Helocsdnsa jdnsajndjk sandjks addwdwdwdn sajkkwfjnw kjqnf wkjnfkjewn
fefewfefew dd

You can use /([^ ]{10})/g with .replace() method to add space after every 10 characters. Try this:
var str = "Helocsdnsajdnsajndjksandjks addwdwdwdnsajkkwfjnwkjqnf wkjnfkjewnfefewfefewdd";
str = str.replace(/([^ ]{10})/g, "$1 ");
console.log(str)

This can also do the job. If someone can do more customization to it, this code can help...
function SplitString(str, charLimit) {
var arrData = str.split(" ");
var returnStr = '';
if (arrData.length > 0)
{
for (var i = 0; i < arrData.length; i++)
{
if (arrData[i].length > charLimit)
{
var element = arrData[i];
var element2 = '';
var loopTimes = Math.ceil(arrData[i].length / charLimit);
var pickPlace = 0
for(var j = 0;j<loopTimes;j++)
{
if (j == (loopTimes - 1)) {
element2 = element2 + element.substring(pickPlace, element.length);
}
else
{
element2 = element2 + element.substring(pickPlace, (pickPlace + charLimit)) + ' ';
}
pickPlace = pickPlace + charLimit;
}
arrData[i] = element2;
}
}
for (var i = 0; i < arrData.length; i++)
{
returnStr = returnStr + arrData[i] + ' ';
}
returnStr = returnStr.substring(0,returnStr.length-1);
return returnStr;
}
}

Javascript jslint says spell_img is used before being declared

What is wrong with my code, I checked it with an online jslint and it says spell_img is used before being declared?
spell_img = new Image();
spell_img.src = '/images/standard/spellcheck.gif';
spell_img.setAttribute('title',_lang_spellcheck );
function find_text_boxes()
{
myforms = document.forms;
for( i=0;i < myforms.length; i++ )
{
textareas = myforms[i].getElementsById('textarea');
for( y=0; y < textareas.length; y++ )
{
spelllink = document.createElement('a');
spelllink.setAttribute('href',"javascript:spellCheck(" + i + ", '" + textareas[y].name + "')");
spelllink.appendChild( spell_img.cloneNode(true) );
textareaParent = textareas[y].parentNode;
textareaParent.insertBefore( spelllink, textareas[y].nextSibling );
}
}
}

Step 1: declare variables. In JavaScript, this is done using var. var scopes the variable to the scope where the var was found; scopes in JavaScript are (currently) function-based.
var spell_img = new Image();
spell_img.src = '/images/standard/spellcheck.gif';
spell_img.setAttribute('title',_lang_spellcheck );
function find_text_boxes()
{
var myforms = document.forms;
for( var i=0;i < myforms.length; i++ )
{
var textareas = myforms[i].getElementsById('textarea');
for( var y=0; y < textareas.length; y++ )
{
var spelllink = document.createElement('a');
spelllink.setAttribute('href',"javascript:spellCheck(" + i + ", '" + textareas[y].name + "')");
spelllink.appendChild( spell_img.cloneNode(true) );
textareaParent = textareas[y].parentNode;
textareaParent.insertBefore( spelllink, textareas[y].nextSibling );
}
}
}
Step 2: getElementsById is not a thing that exists. It’s getElementsByTagName.
var spell_img = new Image();
spell_img.src = '/images/standard/spellcheck.gif';
spell_img.setAttribute('title',_lang_spellcheck );
function find_text_boxes()
{
var myforms = document.forms;
for( var i = 0; i < myforms.length; i++ )
{
var textareas = myforms[i].getElementsByTagName('textarea');
for( var y = 0; y < textareas.length; y++ )
{
var spelllink = document.createElement('a');
spelllink.setAttribute('href',"javascript:spellCheck(" + i + ", '" + textareas[y].name + "')");
spelllink.appendChild( spell_img.cloneNode(true) );
textareaParent = textareas[y].parentNode;
textareaParent.insertBefore( spelllink, textareas[y].nextSibling );
}
}
}
Step 3: wait, why are you even getting forms first?
var spell_img = new Image();
spell_img.src = '/images/standard/spellcheck.gif';
spell_img.setAttribute('title',_lang_spellcheck );
function find_text_boxes() {
var textareas = document.getElementsByTagName('textarea');
for(var i = 0; i < textareas.length; i++) {
var spelllink = document.createElement('a');
spelllink.setAttribute('href',"javascript:spellCheck(" + i + ", '" + textareas[y].name + "')");
spelllink.appendChild( spell_img.cloneNode(true) );
textareaParent = textareas[y].parentNode;
textareaParent.insertBefore( spelllink, textareas[y].nextSibling );
}
}
Step 4: javascript: URIs are bad. Inline JavaScript is bad. Inline JavaScript in inline URL in JavaScript? That’s really bad and is kind of like eval and all sorts of things. Create a function and make spellCheck accept an element object, not form index, yuck. title is a property as well as an attribute (like src), by the way:
var forEach = Array.prototype.forEach;
var spell_img = new Image();
spell_img.src = '/images/standard/spellcheck.gif';
spell_img.title = _lang_spellcheck;
function find_text_boxes() {
var textareas = document.getElementsByTagName('textarea');
forEach.call(textareas, function(textarea) {
var spellLink = document.createElement('a');
spellLink.href = "#";
spellLink.addEventListener("click", function(e) {
e.preventDefault();
spellCheck(textarea);
}, false);
spellLink.appendChild(spell_img.cloneNode(true));
textarea.parentNode.insertBefore(spelllink, textareas[y].nextSibling);
});
}
If you need to be compatible with old IE without shivs, that’s doable:
var spell_img = new Image();
spell_img.src = '/images/standard/spellcheck.gif';
spell_img.title = _lang_spellcheck;
function find_text_boxes() {
var textareas = document.getElementsByTagName('textarea');
for (var i = 0; i < textareas.length; i++) {
(function(textarea) {
var spellLink = document.createElement('a');
spellLink.href = "#";
spellLink.onclick = function() {
spellCheck(textarea);
return false;
};
spellLink.appendChild(spell_img.cloneNode(true));
textarea.parentNode.insertBefore(spelllink, textareas[y].nextSibling);
})(textareas[i]);
});
}
You can really put the cherry on top with some event delegation.
function addSpellLink(textarea) {
var link = document.createElement("a");
link.className = "spell-link";
link.href = "#";
link.appendChild(spell_img.cloneNode(true));
textarea.parentNode.insertBefore(link, textarea.nextSibling);
}
function findTextboxes() {
Array.prototype.forEach.call(document.getElementsByTagName("textarea"), addSpellLink);
}
document.addEventListener("click", function(e) {
if (e.target.classList.contains("spell-link")) {
e.preventDefault();
spellCheck(e.previousElementSibling);
}
}, false);

var spell_img = new Image();//place any one of these right at the top of your scope.
or
window.spell_img = new Image();//replace first line

I want to remove img tag on click of button from javascript

I have added here 2 functions moveoutid() for creating img tag on click of button and it addes image src to img tag to show image on webpage. and moveinid() for removing selected image from img tag.
function moveoutid() {
var sda = document.getElementById('availableFruits');
var len = sda.length;
var sda1 = document.getElementById('orderFruits');
for (var j = 0; j < len; j++) {
if (sda[j].selected) {
alert(baseUrl + "/img/" + sda.options[j].value + ".jpg");
var img1 = document.createElement('img').src = baseUrl + "/img /" + sda.options[j].value + ".jpg";
var di = document.getElementById('d');
di.appendChild(img1);
var tmp = sda.options[j].text;
var tmp1 = sda.options[j].value;
sda.remove(j);
j--;
var y = document.createElement('option');
y.text = tmp1;
try {
sda1.add(y, null);
} catch (ex) {
sda1.add(y);
}
}
}
}
function moveinid() {
var sda = document.getElementById('availableFruits');
var sda1 = document.getElementById('orderFruits');
var len = sda1.length;
for (var j = 0; j < len; j++) {
if (sda1[j].selected) {
di = document.getElementById('d');
img1.src = baseUrl + "/img/" + sda1.options[j].value + ".jpg";
//img.className="";
di.removeChild(img1);
var tmp = sda1.options[j].text;
var tmp1 = sda1.options[j].value;
sda1.remove(j);
j--;
var y = document.createElement('option');
y.text = tmp;
try {
sda.add(y, null);
} catch (ex) {
sda.add(y);
}
}
}
}
I want to remove selected img tag from div (means which ever image selected by user in dropdown list that image should be remove.)

Instead of removing the tag it sounds like you just need to show and hide that image.
document.getElementById('Image').style.visibility='visible';
If I understood correctly. Or you could even destroy the element removing it from the DOM.