How to pass a variable from one function to another function CDATA - javascript

I am very new to JavaScript.
Here is my problem, I have a form with a "cp" field from which I retrieve the value in real time
This is achieved in a function.
Then I would like to use my result in the mondial relay widget to override the plugin default
After testing several things, I give you my last try which does not show me the "cp" variable in the second function.
So I would like to replace PostCode: "6000" with cp
<input class="form-control" type="text" name="cp" value="" id="cp" required="required" />
<javascript>
var input ;
//le code postal
$(document).ready(function(){
$("#cp").keyup(function(){
const cptest = document.querySelector('[name="cp"]');
console.log (cptest);
var input = document.getElementById("cp").value;
console.log (input);
return input;
});
});
//<![CDATA[
console.log (input);
// Initialiser le widget après le chargement complet de la page
$(document).ready(function () {
// Charge le widget dans la DIV d'id "Zone_Widget" avec les paramètres indiqués
$("#Zone_Widget").MR_ParcelShopPicker({
// Selecteur de l'élément dans lequel est envoyé l'ID du Point Relais (ex: input hidden)
Target: "#Target_Widget",
// Selecteur de l'élément dans lequel est envoyé l'ID du Point Relais pour affichage
TargetDisplay: "#TargetDisplay_Widget",
// Selecteur de l'élément dans lequel sont envoysé les coordonnées complètes du point relais
TargetDisplayInfoPR: "#TargetDisplayInfoPR_Widget",
// BDTEST est utilisé pour les tests => un message d'avertissement apparaît
Brand: "BDTEST ",
// Pays utilisé pour la recherche: code ISO 2 lettres.
Country: "BE",
// Code postal pour lancer une recherche par défaut
PostCode: "6000",
// Activer l'affichage Responsive.
Responsive: true,
// Fonction de callback déclenché lors de la selection d'un Point Relais
OnParcelShopSelected:
AllowedCountries: "FR,BE,NL,LU",
});
});
// ]]>
</javascript>

There are a few issues with your code:
when working with jQuery you should use its powers and not mix it with document.querySelector()
input was declared locally within your jQuery event handler and was therefore invisible.in the global scope
input is only defined properly after the first keyup event (which I changed to input as this also includes mouse based input actions)
var input ;
//le code postal
$(function(){
$("#cp").on("input",function(){
input=this.value;
console.log(input);
// anything you want to happen to
// $("#Zone_Widget").MR_ParcelShopPicker(..)
// needs to happen here ...
});
});
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<input class="form-control" type="text" name="cp" value="" id="cp" required="required" />

Related

Impossible to unescape HTML with replace - Javascript

For one of my translation service, I need to keep my tags during the translation, so I've found a workaround that works like a charm :
var text = '<strong>Le doute commence à s’installer</strong> en toi. Tu as déjà fait ça auparavant avec d’autres hommes, ça marchait très bien, mais pas sur lui. Tu te demandes alors, découragée : <em>“Qu’est-ce qui ne va pas chez moi ? J’ai perdu la main ?”</em>'
// Now, we have to replace every tag by characters, and we will reuse the same characters to revert to their origins
var translateThis = text.replaceAll("<","dntch1").replaceAll(">","dntch2").replaceAll("/","dntch3");
console.log(translateThis);
But when I want to reverse the process, I have this problem :
var toNormal = translateThis.replaceAll("dntch1","<").replaceAll("dntch2",">").replaceAll("dntch3","/");
console.log(toNormal);
// output : "<strong>Le doute commence à s’installer</strong> en toi. Tu as déjà fait ça auparavant avec d’autres hommes, ça marchait très bien, mais pas sur lui. Tu te demandes alors, découragée : <em>“Qu’est-ce qui ne va pas chez moi ? J’ai perdu la main ?”</em>"
My string is full of unescaped HTML, but I want to revert to my HTML markers ...
I've already tried this :
function unEscape(htmlStr) {
htmlStr = htmlStr.replace(/</g , "<");
htmlStr = htmlStr.replace(/>/g , ">");
htmlStr = htmlStr.replace(/"/g , "\"");
htmlStr = htmlStr.replace(/'/g , "\'");
htmlStr = htmlStr.replace(/&/g , "&");
return htmlStr;
}
console.log(unEscape(toNormal));
// output : "<strong>Le doute commence à s’installer</strong> en toi. Tu as déjà fait ça auparavant avec d’autres hommes, ça marchait très bien, mais pas sur lui. Tu te demandes alors, découragée : <em>“Qu’est-ce qui ne va pas chez moi ? J’ai perdu la main ?”</em>"
I'm lost, maybe I've missed something ?
Thanks for your help !
PS : You can find below the expected output.
// Expected output : "<strong>Le doute commence à s’installer</strong> en toi. Tu as déjà fait ça auparavant avec d’autres hommes, ça marchait très bien, mais pas sur lui. Tu te demandes alors, découragée : <em>“Qu’est-ce qui ne va pas chez moi ? J’ai perdu la main ?”</em>"
Link to JSFiddle : https://jsfiddle.net/he25c3y4/3/

Angular how to convert a text string to html objects in typescript

Under my Angular app :
i ve a string like the following :
let mystr : "<p>Ceci c'est un texte aléatoire de test <a href='https://codemirror.net' title='https://codemirror.net' target='_blank'>ceci c'est un simple HYPERLINK</a> Ceci c'est un autre texte aléatoire de test Ceci c'est un autre texte aléatoire de test <a title='' target='_blank' href='http://testing.com/book.html?default=<script>alert(document.cookie)</script>'>Un autre hyperlink </a></p><p>Ceci c’est un hyperlink copié sur la même page:</p><p><a href='https://aaa.bb.tes.com/aide-et-support/fiche-assistance/31516/une-page-grise-saffiche-a-louverture-dun-fichier-excel-2010' title='se rendre sur la page Une page grise s’affiche à l’ouverture d’un fichier – Excel 2010'><span style='color:blue;'>Une page grise s’affiche à l’ouverture d’un fichier – Excel 2010</span></a></p>"
My purpose , is how to convert that string to html objects and manipulate them in typescript
(beofre appending them to the DOM with innerHtml)
And then be able to modify them before displaying in the view ;
For example i want to change all the titles attributes of all tags within that string
You can for example:
const mystr : "<p>Ceci c'est un texte aléatoire de test <a href='https://codemirror.net' title='https://codemirror.net' target='_blank'>ceci c'est un simple HYPERLINK</a> Ceci c'est un autre texte aléatoire de test Ceci c'est un autre texte aléatoire de test <a title='' target='_blank' href='http://testing.com/book.html?default=<script>alert(document.cookie)</script>'>Un autre hyperlink </a></p><p>Ceci c’est un hyperlink copié sur la même page:</p><p><a href='https://aaa.bb.tes.com/aide-et-support/fiche-assistance/31516/une-page-grise-saffiche-a-louverture-dun-fichier-excel-2010' title='se rendre sur la page Une page grise s’affiche à l’ouverture d’un fichier – Excel 2010'><span style='color:blue;'>Une page grise s’affiche à l’ouverture d’un fichier – Excel 2010</span></a></p>"
const el = document.createElement('div');
el.innerHTML = mystr;
const allA = el.querySelectorAll('a');
allA.forEach(a => console.log(a.getAttribute('title')));
and so forth...
You can use DomParser for this
const dom = new DOMParser().parseFromString('<h1>Hi</h1>','text/html')
const h1 = dom.querySelector('h1')
h1.setAttribute('hidden', 'true')
console.log(h1) // <h1 hidden="true">Hi</h1>

Why does JavaScript's string.split() not work correctly in certain cases?

I need to split a string of text into its component words, so I'm using a Regex to split it on the empty spaces (in a Typescript file, btw).
splitIntoWords(text: string) : Array<string> {
const separator = ' ';
const words = text.split(new RegExp(separator, 'g'));
return words;
}
This mostly works, but I've noticed that I regularly get words in the array that still contain spaces. If I copy the text into the Chrome console and split(' ') it I get the correct amount of words, but when I use the variable (even in the console) it invariably fails in some cases. I can't work out what the difference is. This is an example of my text:
"Le coronavirus en France : la décrue se poursuit en réanimation, la reprise économique au cœur des préoccupations. La mise en œuvre du plan de déconfinement élaboré par le gouvernement doit encore faire l’objet, jeudi, d’un « travail de concertation et d’adaptation aux réalités de terrain » avec les responsables et les élus locaux."
The regex never manages to split the substring "économique au" into two components, for instance. Does anyone know why this is happening?
It sounds like the whitespace is occasionally not just a plain space. You can split on all whitespace by using \s for the separator instead, which will match any whitespace, including space characters and tab characters.
const text = "Le coronavirus en France : la décrue se poursuit en réanimation, la reprise économique au cœur des préoccupations. La mise en œuvre du plan de déconfinement élaboré par le gouvernement doit encore faire l’objet, jeudi, d’un « travail de concertation et d’adaptation aux réalités de terrain » avec les responsables et les élus locaux.";
const words = text.split(/\s/);
console.log(words);
Another option would be to use match instead of split, and match non-whitespace characters.
const text = "Le coronavirus en France : la décrue se poursuit en réanimation, la reprise économique au cœur des préoccupations. La mise en œuvre du plan de déconfinement élaboré par le gouvernement doit encore faire l’objet, jeudi, d’un « travail de concertation et d’adaptation aux réalités de terrain » avec les responsables et les élus locaux.";
const words = text.match(/\S+/g);
console.log(words);

Dynamic data attribute in bootstrap modal

I made a piece of code that changes the data attribute of a link that opens a bootstrap modal window. I cannot get the modified data attribute (provided by setLink();) from the shown.bs.modal function.
How do I proceed? Example below always displays the value of the original data attribute(first data set from setLink() ... but not other value called after).
Note : Modal preview is always called after setLink function. I call setLink(); then I click on the preview link that open modal.
Preview
Change link
function setLink(){
var quotes = new Array("Salon du vin Belgique", "Salon du vin et gastronomie", "Salon du vin de Huy", "Vins et produits bio", "Dégustation de vins de qualités", "Foire des vins", "Salon du vin et des produits bio", "Foire des vins de Huy", "Salon du vin et de la gastronomie de Huy", "Foire des vins et des produits bio", "Foire des vins et de la gastronomie", "Découvrir des meilleurs vins de cette année", "Nous sommes présents au salon du vin de Huy"),
randno = quotes[Math.floor( Math.random() * quotes.length )];
$('.preview').attr('data-link', randno);
}
$('#preview').on('shown.bs.modal', function(event)
{
var btn = $(event.relatedTarget),
link = btn.data('link');
$(this).find('.modal-body').html(''+link+'');
});
Ok, jquery dom process => I change btn.data('link'); to btn.attr('data-link'); and it work

Regex: get numbers after a matching pattern with multi lang support

Expected Income/Output
Input: Longines, retailed by Barth, Zurich, ref. 22127, movement no. 5770083,
Desired Output: 5770083
Only digits from this I will build: {"Movement Number": 5770083}
I believe I will need to run multiple regexes against each string as I need to know the following:
Which title belongs to which string ie movement no.= 5770083 etc
Multiple different languages will be used for the same title, for example:
Movement number variations:
Movement no.
mouvement signés.Numérotée
no
MVT
jewels #
Werk-Nr.
Current regex: /movement no. ([^\s]+)/
With the above regex it will also pick up the ,.
It is also case insensitive.
Test String
Longines. A very fine and rare stainless steel water-resistant
chronograph wristwatch with black dial and original box\nSigned
Longines, retailed by Barth, Zurich, ref. 22127, movement no. 5770083,
case no. 46, circa 1941\nCal. 13 ZN nickel-finished lever movement, 17
jewels, the black dial with Arabic numerals, outer railway five minute
divisions and tachymetre scale, two subsidiary dials indicating
constant seconds and 30 minutes register, in large circular
water-resistant-type case with flat bezel, downturned lugs, screw
back, two round chronograph buttons in the band, case and movement
signed by maker, dial signed by maker and retailer\n37 mm. diam.
Test String French
MONTRE BRACELET D'HOMME CHRONOGRAPHE EN OR, PAR LONGINES\n\nDe forme
ronde, le cadran noir à chiffres arabes, cadran auxiliaire pour les
secondes à neuf heures et totalisateur de minutes à trois heures,
mouvement mécanique 13 Z N, vers 1960, poids brut: 44.49 gr., monture
en or jaune 18K (750)\n\nCadran Longines, mouvement no. 3872616, fond
de boîte no. 5872616\nVeuillez noter que les bracelets de montre
pouvant être en cuirs exotiques provenant d'espèces protégées, tels le
crocodile, ils ne sont pas vendus avec les montre même s'ils sont
exposés avec celles-ci. Christie's devra retirer et conserver ces
bracelets avant leur collecte par les acheteur
You can use
\b((?:Movement|mouvement) no\.|mouvement signés\.Numérotée|no|MVT|jewels #|Werk-Nr\.) (\d+)
https://regex101.com/r/thL0wt/1
Start at a word boundary, then inside a capturing group, alternate between all the different possible phrases you want before a number - then, match a space, and capture numeric characters in another group. Your desired result will be in the first and second capturing groups.
const input = `Longines. A very fine and rare stainless steel water-resistant chronograph wristwatch with black dial and original box\nSigned Longines, retailed by Barth, Zurich, ref. 22127, movement no. 5770083, case no. 46, circa 1941\nCal. 13 ZN nickel-finished lever movement, 17 jewels, the black dial with Arabic numerals, outer railway five minute divisions and tachymetre scale, two subsidiary dials indicating constant seconds and 30 minutes register, in large circular water-resistant-type case with flat bezel, downturned lugs, screw back, two round chronograph buttons in the band, case and movement signed by maker, dial signed by maker and retailer\n37 mm. diam.
MONTRE BRACELET D'HOMME CHRONOGRAPHE EN OR, PAR LONGINES\n\nDe forme ronde, le cadran noir à chiffres arabes, cadran auxiliaire pour les secondes à neuf heures et totalisateur de minutes à trois heures, mouvement mécanique 13 Z N, vers 1960, poids brut: 44.49 gr., monture en or jaune 18K (750)\n\nCadran Longines, mouvement no. 3872616, fond de boîte no. 5872616\nVeuillez noter que les bracelets de montre pouvant être en cuirs exotiques provenant d'espèces protégées, tels le crocodile, ils ne sont pas vendus avec les montre même s'ils sont exposés avec celles-ci. Christie's devra retirer et conserver ces bracelets avant leur collecte par les acheteur`;
const matches = {};
let match;
const pattern = /\b((?:Movement|mouvement) no\.|mouvement signés\.Numérotée|no|MVT|jewels #|Werk-Nr\.) (\d+)/gmi;
while (match = pattern.exec(input)) {
matches[match[1]] = match[2];
// or, if you only want a single object:
const obj = {
[match[1]]: match[2]
};
}
console.log(matches);
For movement no. specifically you'll want this regex to get rid of the comma:
movement no. ([^\s\W]+)
In regards to the languages, a set of if statements performing the appropriate term that you want to test against is the only way I can think of unless the RegExp object allows for string substitution. Sorry for not being more help in that area.
You are using negated character class [^\s]+, which matches everything except whitespace. So, if there's another character you don't want to match, i.e. comma ,, then add it to this class: [^\s,].
And you can follow same logic for any character you don't want to match.
var input = "Longines, retailed by Barth, Zurich, ref. 22127, movement no. 5770083";
var output = input.match(/(?<=movement no. )\d+/)

Categories

Resources