Impossible to unescape HTML with replace - Javascript - 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/

Related

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

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" />

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

Can't read xml document (Cannot call method 'getElementsByTagName ' of null)

I'm trying to read data from an xml via javascript for a PhoneGap app and I'm getting this error 'Cannot call method 'getElementsByTagName' of null'. I used the exact same code for a smaller xml and it worked properly, now that I changed to a bigger xml file it no longer works. Here is my code and my xml. Code:
function cargar(nombre_lista){
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","../../res/datahell.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var lista_elementos = new Array();
fichas=xmlDoc.getElementsByTagName("ficha"); //LINE WHERE THE ERROR TRIGGERS
for (var i = 0; i <fichas.length ; i++) {
tipo=(fichas[i].getElementsByTagName("tipo")[0].childNodes[0].nodeValue);
subcategoria=(fichas[i].getElementsByTagName("subcategoria")[0].childNodes[0].nodeValue);
if (tipo==window.localStorage.getItem("tipo") && subcategoria==window.localStorage.getItem("subcategoria")) {
lista_elementos.push(fichas[i].getElementsByTagName("nombre")[0].childNodes[0].nodeValue)
};
};
load_list(nombre_lista, lista_elementos);
}
The XML:
<fichas>
<ficha>
<tipo>comer</tipo>
<subcategoria>restaurantes</subcategoria>
<nombre>Restaurante Azurmendi</nombre>
<coordenadas>
<latitud>43.26055</latitud>
<longitud>-2.813487</longitud>
</coordenadas>
<email>info#azurmendi.biz</email>
<redessociales></redessociales>
<telefonos>
<telefono1>944558866</telefono1>
<telefono2></telefono2>
</telefonos>
<direccion>Legina auzoa, s/n, 48195 Larrabetzu
Corredor del Txorierri salida nº25</direccion>
<web>www.azurmendi.biz</web>
<horariodevisita></horariodevisita>
<precio></precio>
<descripcion>Azurmendi gastronómico es un nuevo espacio creado y diseñado según la filosofía y los deseos de Eneko Atxa. Un restaurante con un espacio que busca la identidad y la diversidad. Un espacio vivo, vulnerable e interdependiente. Un ecosistema en el que el espacio, los humanos, los animales y los vegetales se complementan con el objetivo de según Eneko:
“ Dar placer a todo el que se adentre en él, un placer identitario que busca hacer de lo local algo universal ”.
</descripcion>
<fotos>
<foto1>../img/fotoX.jpg</foto1>
<foto2>../img/fotoY.jpg</foto2>
<foto3>../img/fotoZ.jpg</foto3>
</fotos>
</ficha>
<ficha>
<tipo>comer</tipo>
<subcategoria>bodegas</subcategoria>
<nombre>Bodega Magalarte</nombre>
<coordenadas>
<latitud>43.277768</latitud>
<longitud>-2.830489</longitud>
</coordenadas>
<email>por confirmar</email>
<redessociales></redessociales>
<telefonos>
<telefono1>617557680</telefono1>
<telefono2>636621455</telefono2>
</telefonos>
<direccion></direccion>
<web>www.magalartelezamatxakolina.com</web>
<horariodevisita></horariodevisita>
<precio>8 € (Visita guiada y cata)</precio>
<descripcion>Descubre los secretos de la elaboración del txakoli, visitando nuestros viñedos y nuestra bodega familiar “Magalarte Lezama” fundada en el siglo XIX; posiblemente una de las pocas bodegas que se mantiene desde entonces.
Nuestro viñedo respeta el medio ambiente, cosechando bajo las normas de producción integrada, logrando un txakoli totalmente autóctono, tradicional y natural, inscrito en la Denominación de Origen de Bizkaiko Txakolina, certificado por Kalitatea y bajo las normas de calidad ISO 9001-2008.
Esta bodega situada en una zona privilegiada para el desarrollo de la vid y rodeado de naturaleza, a tan solo 10 minutos del aeropuerto y de Bilbao, os brinda la oportunidad de conocer los secretos del Valle del Txorierri.
No dejes escapar la oportunidad de degustar el aroma fresco y afrutado, el sabor y la textura diferenciados de nuestro producto.</descripcion>
<fotos>
<foto1>../img/Magalarte1.jpg</foto1>
<foto2>../img/Magalarte2.jpg</foto2>
<foto3>../img/Magalarte3.jpg</foto3>
</fotos>
</ficha>
<ficha>
<tipo>ver</tipo>
<subcategoria>edificiosreligiosos</subcategoria>
<nombre>Iglesia San Cristóbal</nombre>
<coordenadas>
<latitud>43.301743</latitud>
<longitud>-2.877601</longitud>
</coordenadas>
<email></email>
<redessociales></redessociales>
<telefonos>
<telefono1></telefono1>
<telefono2></telefono2>
</telefonos>
<direccion></direccion>
<web></web>
<horariodevisita></horariodevisita>
<precio></precio>
<descripcion>Fundada en el siglo X y reedificada y ampliada en el año 1745. Es un edificio de mampuesto con grandes sillares en las esquinas. De acceso dintelado, torre rectangular y pórtico sostenido por vigas. En el interior se conserva una imagen gótica de la Virgen y el niño.</descripcion>
<fotos>
<foto1></foto1>
<foto2></foto2>
<foto3></foto3>
</fotos>
</ficha>
<ficha>
<tipo>ver</tipo>
<subcategoria>edificiosreligiosos</subcategoria>
<nombre>Iglesia San Isidro</nombre>
<coordenadas>
<latitud>43.299619</latitud>
<longitud>-2.886271</longitud>
</coordenadas>
<email></email>
<redessociales></redessociales>
<telefonos>
<telefono1>944541124</telefono1>
<telefono2></telefono2>
</telefonos>
<direccion>Lainomendi Kalea, 2. 48160 Aldekona</direccion>
<web></web>
<horariodevisita></horariodevisita>
<precio></precio>
<descripcion>Edificio construido en 1958, de planta basilical y con torre lateralizada. Portada con tres arcos y acceso al edificio en medio punto.</descripcion>
<fotos>
<foto1></foto1>
<foto2></foto2>
<foto3></foto3>
</fotos>
</ficha>
<ficha>
<tipo>ver</tipo>
<subcategoria>edificiosciviles</subcategoria>
<nombre>Kultur birika</nombre>
<coordenadas>
<latitud>43,295699</latitud>
<longitud>-2,883568</longitud>
</coordenadas>
<email>kulturbirika#kulturbirika.eu</email>
<redessociales></redessociales>
<telefonos>
<telefono1>944659714</telefono1>
<telefono2></telefono2>
</telefonos>
<direccion>Anboto Plaza, 5 , 48160</direccion>
<web>www.kulturbirika.eu</web>
<horariodevisita></horariodevisita>
<precio></precio>
<descripcion>Desde el Area de Cultura del Ayuntamiento de Derio queremos comunicar e informar de todas las materias y disciplinas culturales que se ofertan a la ciudadanía de Derio a lo largo de todo el año. Toda esta oferta cultural y de ocio se desarrolla en diferentes locales y escenarios, destacando: Larrabarri baserria, Gure Aretoa, Gazte y Kultur birika donde se ubica el Kzgunea, biblioteca, exposiciones, salas de música y danza, talleres y locales para las asociaciones.</descripcion>
<fotos>
<foto1>Kultur birika 1</foto1>
<foto2>Kultur birika 2</foto2>
<foto3>Kultur birika 3</foto3>
</fotos>
</ficha>
<ficha>
<tipo>ver</tipo>
<subcategoria>museos</subcategoria>
<nombre>B-TEK(Bizkaiko Teknologi Elkartegia</nombre>
<coordenadas>
<latitud>43,299197</latitud>
<longitud>-2,868633</longitud>
</coordenadas>
<email>btek#btek.org</email>
<redessociales></redessociales>
<telefonos>
<telefono1>944039500</telefono1>
<telefono2>946568844</telefono2>
</telefonos>
<direccion>Edificio 602 Parque Tecnológico, Astondo bidea, 48160 Elexalde</direccion>
<web>www.btek.org</web>
<horariodevisita>Lunes a Jueves de 9h a 14h y de 15h a 18h
Viernes de 9h a 14h
Duración de la visita:Visita al Centro: 2 horas, Taller: 45 minutos
( Todas las visitas se deben reservar)</horariodevisita>
<precio>3 € visita dinamizada sin taller
4 € visita dinamizada con taller</precio>
<descripcion>BTEK, el Centro de Interpretación de la Tecnología del Parque Científico y Tecnológico de Bizkaia tiene como objetivo acercar la tecnología a los jóvenes, sobre todo a los estudiantes de educación secundaria, impulsando la cultura científica-tecnológica. BTEK está ubicado en el edificio 602 del Parque, en el municipio de Derio.</descripcion>
<fotos>
<foto1>Btek1</foto1>
<foto2>Btek2</foto2>
<foto3> Btek3</foto3>
</fotos>
</ficha>
The XML is a lot larger, but It doesn't allow me to paste it all.
You need to convert your XML string to a DOM parser object first, before parsing it like a DOM tree.
// convert the xml string response to a DOM parser
xmlDoc = ( new DOMParser() ).parseFromString( xmlhttp.responseXML, "text/xml" );
Now, you can use your parsing methods.
Hope that helps.

Categories

Resources