Code example:
<c:out value="${slide.textContent}"/>
Output example: ' <script> alert("Hello! I am an alert box!")</script> 😃 '
So what I am trying to do is that the last part of the example is a normal emoji and I want it to be displayed. But at the same time I want it to be save for XSS. So setting escapeXml to false is not the way to do it. what is a good way to solve this problem or are there other ways to let this work out?
Recommendation are more than welcome.
edit: the first part of the example <script> should stay as text. I might understand the confusion so that's why I'm mention it.
Kind of solution:
I did solve it by calling the text with Javascript & than placing it again
function myFunction() {
var inputText = document.getElementById("myList").textContent;
var outputText = inputText.replace(/</g,"<").replace(/>/g,">");
document.getElementById("myList").innerHTML = outputText;}
But I am still wondering what the real solution is. It seems that a lot of companies replace the Emoji with a image. Wondering why there is no libary for something like that.
Related
I'm trying to use JavaScript to include a footer on several webpages, so if I want to change the footer, I only have to change it in one place. PHP is not available on this server and neither are server side inserts (SSI), but Perl, Python, and Tcl are available. I have been trying with document.getElementsByTagName('footer').innerHTML = "text"; but it doesn't produce text. I copied this code from dev.mozilla, and it tells me how many tags I have:
var footer = document.getElementsByTagName('footer');
var num = footer.length;
console.log('There is ' + num + ' footer in this document');
So, I don't know what's wrong with the innerHTML script. I also tried with paragraph tags and got the same results in both cases.
I reccoment using textContent instead. Se why here.
To see how it works, paste the following into your browser console while you're on StackOverflow and hit enter.
document.querySelector('.site-footer').textContent = 'Custom footer content.'
note: use querySelector with a class instead of getElementByTagName
Cheers! 🍻
Before asking this question, I had searched for Python includes without any luck, so I stopped there, but after asking this question, I thought that I should search for Perl/Ruby includes. Today, I found out that I can use the Perl use function, so I could study that and try to implement it although I am completely new to Perl. Ruby also appears capable, perhaps even more. I have no experience with Ruby either, but maybe I should start there.
I just figured out that getElementsByTagName() results in an array, so I have to refer to the footer's index with [0]:
var footerTags = document.getElementsByTagName('footer');
footerTags[0].innerHTML = "test";
I stored an table's html as a text, using this code.
var Data = document.getElementsByClassName("result")[0].innerHTML;
I am able to observe the selected part using console.log, however, I wish to extract this data to be copied and used outside.
So I tried alert(Data), but it does not offer a good surface to copy the data (it does work though, however I cannot use right click on the pop-up window)
I also tried to programmatically copy the data to the clipboard, but it seems, it only works on selected text data.
Is there a better way to extract such data to be used outside ?
Note: I am using a firefox bookmark to execute javascript. But I expect the code to work also in the other browsers.
Edit: I tried the method suggested in the comments, however in firefox, I got an error.
document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.
So rather than copying with that command, printing to a surface seems a better choice, if possible. The linked question does not solve my issue.
Edit2: window.prompt did a much better job, however it rocked my world by pressing the text to a single line. I still should be able to parse it programmatically, but if there is a better answer, I wish to learn it.
Below is my solution to keep multiple lines.
It creates one temp 'textarea', then remove it after select()->copy.
function triggercopy() {
var target_obj = document.getElementById('test1');
var copy_text = target_obj.innerHTML; //replace with your actual data.
var hidden_obj = document.createElement("textarea");
hidden_obj.value = copy_text;
document.body.insertBefore(hidden_obj,target_obj);
console.log('prepare:' + copy_text);
hidden_obj.select();
document.execCommand("copy");
document.body.removeChild(hidden_obj);
console.log('already copied:' + copy_text);
}
Text3as
dfsadf
<a id="test1" onclick="triggercopy();">Text3as
dfsadf</a>
I found two methods best suit my interests.
First, window.prompt:
var Data = document.getElementsByClassName("result")[0].innerHTML;
function copyToClipboard(text) {
window.prompt("Copy data.", text);
}
copyToClipboard(Data)
This is a good method, taken from a suggested answer. This puts the data into a single-line text field. And in an interesting manner, when written without a function, executes document.write(Data) when clicked OK, this does not happen when written in a function as above.
Second, document.write:
var target = document.getElementsByClassName("resultTable striped")[0].outerHTML;
document.open('text/plain');
document.write(target);
I first tried to open a new tab with the desired content, however encountered with the issue of pop-up blockers and non-plain text html data (formatted html instead of the desired table html data). This solves both issues.
function searchString(user_input, search) {
var user_string = document.getElementById('user_input');
var search_string = document.getElementById('search');
document.write(search_string.value);
}
The document would'nt print the value.I am new to javascript and finding it hard to figure out why? I also tried this:
function searchString(user_input, search) {
var user_string = document.getElementById('user_input');
var search_string = document.getElementById('search').value;
document.write(search_string);
}
But no results. I am a noob, please help?
Don't use document.write. Add jQuery to your site instead, then you'd simply do something like:
$('#search').val(search_string);
And you'd get the values using:
var test = $('#searchBox').val();
If you want to do something professional grade I recommend getting into Vue.js as early as possible, it's essentially built to tackle this specific type of problem.
Doing "raw" javascript is sometimes a good thing but don't make things difficult for you. When you have to edit the DOM, use jQuery. If you want to build a website that is highly responsive to various data on your website, use Vue.js. Don't use raw javascript if you're a noob.
Here is the problem(if you can call it so), every time i write JS that includes functions it doesn't work. I know it's related to spaces, line-breaks or sth like that. Maybe I don't know the rule or the syntax. i'm using sublime text3(if it's related). And i will be thankful if you explain the reason to me so i won't be facing this problem ever again. here is a code that doesn't work on my computer
<script type="text/javascript">
document.getElementById("circle").onclick = function() {
document.getElementById("circle").style.display = "none";
}
</script>
Are you sure that the element with the ID "circle" has the onclick function as one of its properties? you can check the property list with the dir function that is on the console.
console.dir(document.getElementById("circle"));
The dir is not for production though. It does come in handy in development and debugging.
MDN Console.dir()
I have a rather unique problem where I'm trying to run some jquery logic to replace text temporarily on a page. Then run some logic (I take a screenshot for a tool I'm using). So far this works great, the problem is that due to legacy code I need to revert the changes the replace call did on the page.
Any ideas on the best way to do this?
For the curious, I currently have:
$('body').html($('body').html().replace(/[a-zA-Z0-9\\*]*#.*\\.com/g,'[replaced for screenshot]'))
Thanks!
I'd question your motives and reasoning, but I'll provided an answer nonetheless:
var backup_body_html = $('body').html();
$('body').html(backup_body_html.replace(/[a-zA-Z0-9\\*]*#.*\\.com/g,'[replaced for screenshot]'));
Afterwards:
$('body').html(backup_body_html);
(Unless you need to keep hold of event handlers etc, in which case cloning is needed)
Cloning method:
var body_children = $("body").clone(true,true).children();
//other stuff (i.e. replacements)
//then:
$("body").html("");
$("body").append(body_children);
Not completely serious but I have to...
location.reload();
Before
var bodyHTML = document.body.innerHTML;
$('body').html(bodyHTML.replace(/[a-zA-Z0-9\\*]*#.*\\.com/g,'[replaced for screenshot]'));
After
$('body').html(bodyHTML)