I have built an application that retrieves data from the WP Rest API V2 with AngularJS. The response contains escaped characters like the one below:
"excerpt": {
"rendered": "<p>Når vi handler ind, støder vi på mange forskellige mærkningsordninger, og det kan ofte være svært at finde ud af, hvad de forskellige typer betyder. For at give dig svar på…</p>\n",
"protected": false
},
Is there a way unescape the character in Angular? I have looked at multiple options but none seem to work.
The data is displayed in my view like this:
<div class="titlepane">
<h4 class="posttitle white">
{{posts.title.rendered}}
</h4>
<h4 class="categorytitle white">
{{categories.name}}
</h4>
</div>
You can see the result in the image where the escaped character is shown.
How do I solve this?
I figured it out from another thread. The answer is to use the ng-html-bind.
Like the following:
<h2 class="post__title" ng-bind-html="post.title.rendered"></h2
Then it will show as it is supposed to.
Related
I'm doing a study with Angular for news, announcement website.
I'm printing the content as <div [innerHTML]='res.content'></div>. But the contents have youtube links and they appear as text.
I am;
In the content of the 'div' element, I want to determine the links in youtube and convert them to 'embed code'.
An example res.content from Api;
"<p style=\"text-align: center;\"><strong>test yazıdır.</strong></p>\r\n \r\n\r\n<b> </b>\r\n<h4>project description</h4>\r\nMaturity is required as young people will look to the volunteer (&\r\nstaff in general) as a role model.\r\n<div class=\"clearfix\"></div>\r\n<h4>how to apply</h4>\r\nSend CV and covering letter to <strong>info#galwaysteinerschool.com</strong> and name of sending organisation where applicable\r\n\r\n \r\n\r\n<strong>Son Başvuru Tarihi:</strong> 01/02/2019\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\nhttps://www.youtube.com/watch?v=sgUVUVY2e-I\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n<strong>EVS gönderici kuruluş listesi ve başvuru ile ilgili makalemize ulaşmak için tıklayınız.</strong>\r\n\r\n<strong>Diğer AGH/EVS ilanlarına ulaşmak için tıklayınız.</strong>\r\n\r\n<strong>Motivasyon Mektubu Nasıl Yazılır makalemizi okumak için <a title=\"Motivasyon Mektubu Nasıl Yazılır?\" href=\"http://www.example.com/motivasyon-mektubu-nasil-yazilir/\" target=\"_blank\" rel=\"noopener\">tıklayınız.</a></strong>\r\n\r\n<strong>Blog yazarımız Seher Can’ın Avrupa Gönüllü Hizmeti deneyimi makalesi için tıklayınız.</strong>\r\n\r\n<strong>Blog yazarımız Emre Gögebakan’ın Avrupa Gönüllü Hizmeti başvuru süreci makalesi için tıklayınız.</strong>\r\n\r\n<strong>AGH/EVS mülakatı teknikleri makalemiz için tıklayınız.</strong>\r\n\r\n<strong>AGH EN ÇOK SORULAN SORULAR VE CEVAPLARI makalemiz için tıklayınız.</strong>\r\n\r\n<strong>Başarılı Motivasyon Mektubu Teknikleri makalemiz için tıklayınız.</strong>\r\n\r\n \r\n\r\n \r\n\r\n<strong>Kaynak:</strong> https://europa.eu/youth/volunteering/project/9729_en\r\n\r\n \r\n<p style=\"text-align: center;\"><strong>Bu ilan Avrupa Birliği resmi sitesinden duyuru amaçlı kaynak gösterilerek Türkçe diline çevrilmiştir. İlan sorumluluğu example.com sitesinde değildir. Özgeçmiş ve motivasyon mektubu hazırlanması işlemlerinde ÜCRETSİZ olarak kurumumuz destek vermektedir. Kurumumuzun başvurunun olumlu veya olumsuz sonuçlanması konusunda herhangi bir taahhüdü ve etkisi yoktur.</strong></p>";
What kind of a method should I apply for this? and how can I?
What I want to do exactly is find the youtube url inside the article and automatically translate it into the youtube embed code.
Thank you from now.
You could use regex to get the video id from the youtube link.
Then all you need is to add it to the youtube embeded link.
So if you use regex to find the video link from the following link:
https://www.youtube.com/watch?v=sgUVUVY2e-I\
it would return you with this: sgUVUVY2e-I
Then you can insert that into the embeded link like this:
https://www.youtube.com/embed/sgUVUVY2e-I
There are a tone of tutorials on using regex to find information inside a text, then it is all up to you how you want to dislay it.
I need to parse HTML files and extract any characters found within the following flag:
${message}
The message may contain words, whitespace, and even special characters. I have the following regex that seems to partially work:
/\$\{(.+)\}/g
What's happening with this pattern is it appears to be working backwards from the line break and finding the first }. The desired result would be to work forward and find the first }.
Here is the regex in RegExr: https://regexr.com/3ng3d
I have the following test case:
<div>
<div class="panel-heading">
<h2 class="panel-title">${Current Status}<span> - {{data.serviceDisplay}}</span></h2>
</div>
${test}
<div class="panel-body">
<div>${We constantly monitor our services and their related components.} ${If there is ever a service interruption, a notification will be posted to this page.} ${If you are experiencing problems not listed on this page, you can submit a request for service.}</div>
<div>
<div>${No system is reporting an issue}</div>
</div>
<div>
<a>{{outage.typeDisplay}} - {{outage.ci}} (${started {{outage.begin}}})
<div></div>
</a>
</div>
<div><a href="?id=services_status" aria-label="${More information, open current status page}">${More information...}
</a></div>
</div>
</div>
The regex should extract the following:
Current Status
test
We constantly monitor our services and their related components.
If there is ever a service interruption, a notification will be posted to this page.
If you are experiencing problems not listed on this page, you can submit a request for service.
No system is reporting an issue
started {{outage.begin}}
More information, open current status page
More information...
But what I'm actually getting is...
${Current Status} - {{data.serviceDisplay}}
${test}
${We constantly monitor our services and their related components.} ${If 4. there is ever a service interruption, a notification will be posted to this page.} ${If you are experiencing problems not listed on this page, you can submit a request for service.}
${No system is reporting an issue}
${started {{outage.begin}}}
${More information, open current status page}">${More information...}
It appears my regex is working back from the \n and finding the first } which is what's giving me #1, #3, and #6.
How can I work from the start and find the first } as opposed to working backwards from the line break?
Use RegExp.exec() to iterate the text and extract the capture group.
The pattern is /\$\{(.+?)\}(?=[^}]+?(?:{|$))/g - lazy matching of characters until closing curly bracket that is followed by a sequence that ends with opening curly brackets or end of string.
RegExr demo
var pattern = /\$\{(.+?)\}(?=[^}]+?(?:{|$))/g;
var text = '<div>\
<div class="panel-heading">\
<h1>${Text {{variable}} more text}</h1>\
<h2 class="panel-title">${Current Status}<span> - {{data.serviceDisplay}}</span></h2>\
</div>\
${test}\
<div class="panel-body">\
<div>${We constantly monitor our services and their related components.} ${If there is ever a service interruption, a notification will be posted to this page.} ${If you are experiencing problems not listed on this page, you can submit a request for service.}</div>\
<div>\
<div>${No system is reporting an issue}</div>\
</div>\
<div>\
<a>{{outage.typeDisplay}} - {{outage.ci}} (${started {{outage.begin}}})\
<div></div>\
</a>\
</div>\
<div><a href="?id=services_status" aria-label="${More information, open current status page}">${More information...}\
</a></div>\
</div>\
</div>';
var result = [];
var temp;
while(temp = pattern.exec(text)) {
result.push(temp[1]);
}
console.log(result);
I have installed the ExpressionEngine 2.11. and I have created a Channel Field of a textarea type to post the full description of my articles.
My issue comes when trying to include Twitter or Instagram embed code like this one
<blockquote class="twitter-tweet" data-cards="hidden" data-lang="es"><p lang="es" dir="ltr">🏈 SÚPER QUINIELA #NFL 🏈<br><br>¡Gana tarjetas de regalo y viajes a partidos oficiales!<br><br>Juega 👉 t.co/SVMJMjRaHZ pic.twitter.com/MIkMkRdCAa</p>— Innovasport (#innovasport) 1 de septiembre de 2016</blockquote>
<script async src="platform.twitter.com/widgets.js" charset="utf-8"></script>
I've got the following error
Any idea how to let textarea fields to support embeddeds HTML characters?
Greetings, Leo
I got a small problem with my I18n integration.
AngularJS seems to skip one translation in the whole page. Everything translates fine except for one tag.
I get my translations through JSON.
{
"password": {
"title": "Wachtwoord voor [<b>{{username}}</b>]",
"form": {
"button": "Opslaan"
},
"messages": {
"error": "<strong>Er is een fout opgetreden!</strong> Het wachtwoord kon niet worden veranderd.",
"success": "<strong>Wachtwoord veranderd!</strong>"
}
}
}
The line in the HTML:
<h2 translate="password.title" translate-values="{username: '{{account.login}}'}">Password for [<b>{{account.login}}</b>]</h2>
This just displays Password for [Admin].
The request for the password.json file contains exact the same as i stated above. The html contains this when inspected through the Chrome Console:
<h2 translate="password.title" translate-values="{username: 'admin'}" class="ng-scope">Password for [admin]</h2>
Everything else (Without those translate-values) translate fine. But this line doesnt. Why doesnt it work? The login name is correctly passed.
Thanks in advance.
Cheers!
If you use the translate directive, there is no need to add content inside the h2 tag. So, the following should work :
<h2 translate="password.title" translate-values="{username: '{{account.login}}'}"></h2>
I've tried searching the site and I found a bunch of responses that have to deal with toggling divs on this site. I've also read the documentation on the jquery site. However all of my programming experience has been with mostly back-end java services and I am not a front-end web dev at all so when I see all of the explanations that are given to the answers, I really don't understand them. I've gotten things to work on one individual div but I want things to work on a page that will have hundred of divs that I want to be able to toggle individually.
Can somebody help me not just get the answer but to really understand what is going on?
I have a page with story that has two languages. One language is hidden by default and the other language is displayed. I want to be able to click on an individual div and just have that specific div toggle the languages. I'm using 4 divs in my example, but I want this to work on a page that will have hundreds of divs on it.
I've tried a few different things.
Do I need to assign a class or id to the outside divs that I have wrapping things? Why?
How to get my action to apply to every div on the page without having to use write an onclick() attribute to each div and passing in individual id's?
HTML
<div>
<div id="l12" class="l1">
CHAPTER I Down the Rabbit-Hole
</div>
<div id="l22" class="l2" toggeled="true">
Capítulo I Descendo a Toca do Coelho
</div>
</div>
<div>
<div id="l13" class="l1">
<p>
Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'
</p>
</div>
<div id="l23" class="l2" toggeled="true">
<p>
Alice estava começando a ficar muito cansada de sentar-se ao lado de sua irmã no banco e de não ter nada para fazer: uma ou duas vezes havia espiado o livro que a irmã estava lendo, mas não havia imagens nem diálogos nele, "e para que serve um livro", pensou Alice, "sem imagens nem diálogos?"
</p>
</div>
</div>
The Rest
<head>
<meta charset="utf-8"/>
<style>
.l2{display: none;}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js">
<script>
$( ".toggeled" ).click(function() {
$( ".l10" ).toggle();
});
</script>
</head>
If you want to dynamically do this, you will have to traverse through the document to find each div which needs to be translated.
You can indicate which div has translated parts by giving that section a classname (.e.g .section). Then placing your original and translated text each in their own divs (so you know which to hide and which to show) and giving each their own classnames again (e.g. .text and .english).
<b>Click text to translate:</b>
<hr>
<div class="section">
<div class="english">
CHAPTER I Down the Rabbit-Hole
</div>
<div class="text">
Capítulo I Descendo a Toca do Coelho
</div>
</div>
<hr>
<div class="section">
<div class="english">
CHAPTER II Up the Rabbit-Hole
</div>
<div class="text">
Capítulo II Ascendo a Toca do Coelho
</div>
</div>
Upon page load complete, your JavaScript will then loop through each of the .section and hook the click() event, which does the following:
Show English text by toggling visibility of the .english element within the section
Hide original text by toggling visibility of the .text element within the section
(#2 Is optional)
$( document ).ready(function() {
$('.section').each(function() {
// Save the two div references in a var so they can be called later within the event handler
var translationDiv = $(this).children('.english');
var originalDiv = $(this).children('.text'); // Remove if you do not want to hide original text upon toggling
translationDiv.hide(); // Sets initial translation to hide. You can alternatively do this via css such that all .english { display: none; }.
$(this).click(function(e) {
translationDiv.toggle();
originalDiv.toggle(); // Remove if you do not want to hide original text upon toggling
});
});
});
Its much clearer in the example here:
jsFiddle: http://jsfiddle.net/SECLs/1/
Do I need to assign a class or id to the outside divs that I have
wrapping things? Why?
You don't have to, it's up to you. In this case I think it's unnecessary.
How to get my action to apply to every div on the page without having
to use write an onclick() attribute to each div and passing in
individual id's?
Select via. class name - you already seem to have that part set up (with .l1 on English paragraphs and .l2 on Portuguese paragraphs).
Here is a toggle function as such - you don't have to change your HTML, and all you need to do to add another language to it is to add the class name in the selector:
$(".l1, .l2").click(function() {
$(this).hide();
var languages = $(this).parent().children();
languages.eq((languages.index(this) + 1) % languages.length).show();
});
jsFiddle here.
Here's an example of it being used for four languages, just give them the respective class in HTML (l3, l4), hide them via CSS, and add the class names to the selector (I've implemented wrapping so that it goes back to language 1 afterwards):
$(".l1, .l2, .l3, .l4").click(function() {
$(this).hide();
var languages = $(this).parent().children();
languages.eq((languages.index(this) + 1) % languages.length).show();
});
jsFiddle here.