Develop Reference

jquery find specific word on src and remove it

I need to find this word 500x462 in a src image att and remove it . Right now the image ends with 500x462 + jpg and i want it to end with image name + jpg
I forgot to say that the website is a wordpress theme generated by php so i need the script to run after the php
Heres a example of the code i want to change

Using a regex:
$("img").each(function(){
$(this).attr('src', $(this).attr("src").replace(/[\d]{3}x[\d]{3}/, ''));
});
This will remove any sequence of [3 digits][the letter x][3 digits] in all images src attribute.

Use the jquery and .replace(), so for example:
HTML:
<img src="http://www.placehold.it/500x462.jpg">
JQuery:
var string = $("img").attr("src");
var new_string = string.replace('500x462', '');
alert(new_string);
Working DEMO.

Assuming that the image src always ends with a file extension.
<img src="ABC500x462blah500x462.jpg">
<script>
var src = $('img').attr('src');
var textToCheck = '500x462';
$('img').attr('src', src.split('.')[0].replace(new RegExp(textToCheck +"$"),"") // check for the text occurring at the end
+ "." + src.split('.')[1]);
alert($('img').attr('src'));
</script>
Example : https://jsfiddle.net/mu2d6qr7/

I wrote a quick jQuery function to do this for you. First parameter is a jQuery selector and second parameter is the string you would like to remove.
window.srcRemoveString = function(selector, string) {
$(selector).each(function(){
var src = $(this).attr('src');
var filename = src.split('/');
filename = filename[filename.length - 1];
var newFilename = filename.replace(string, '');
$(this).attr('src', src.replace(filename, newFilename));
});
}
srcRemoveString('img', '500x462');

Best way to split text in image source
jQuery(".size-post-thumbnail").each(function(){
let src = jQuery(this).attr("src").split("-220x146");
src = src[0]+src[1];
jQuery(this).attr("src", src);
jQuery(this).removeAttr('srcset');
});

Remove all html tags except <img> or <img/> tags with javascript

I have a JS string and I would like to prevent html and js injection on my website message input.
How can I remove all HTML tags from a string except the img tag, because it is used to display emoticons like this:
<img class="emo" src="images/emo/smile.png">
I am using the following code to remove all html tags but it only works for the <br> tag and not img tag.
function remove_tags(html)
{
var html = html.replace("<img>","||img||");
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
html = tmp.textContent||tmp.innerText;
return html.replace("||img||","<img>");
}
Either remove those html tags or simply display them as simple texts like:
<script> alert("hi");</script>
but except the <img> tags.

You could do like this using jQuery:
function remove_tags(html)
{
var html = html.replace("<img>","||img||");
var text = jQuery(html).text();
return text.replace("||img||","<img>");
}
Reference : Strip HTML from Text JavaScript

You can use this simple code
var html = '<img class="emo" src="images/emo/smile.png">';
var text = html.replace(/<.*?>/g, "");
replace method remove all html tags in string.
You can test every html string in bottom demo.
$("button").click(function(){
var html = $("textarea").val();
var text = html.replace(/<.*?>/g, "");
$("textarea").val(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea><img src=x onerror=alert("Test") /><p>aa</p></textarea>
<br />
<button>Remove HTML tags</button>

Find a element and append a image

I know how to append a image to a known tag. e.g.
//html
<div class="ImageContainer"></div>
//JS
var image = new Image;
image.src = '/Public/Images/image.png';
image.appendTo($('.ImageContainer'));
but how to find a certain tag(the figure tag here) and append the image?
I could locate the figure tag with '.find()':
var ImageContainer = $('<div><figure></figure></div>').
console.log(ImageContainer.find('figure').html());
but failed to append the image to it:
image.appendTo(ImageContainer.find('figure')); //doesn't work

If you have an image element with an id you can select it like so:
var $image = '<img src="/Public/Images/image.png" />';
Then so find the figure elemnt:
$(ImageContainer).find('figure').append($image);

Try below code.
1) Stored image url in variable name $img.
2) Find the div using class name 'image' ($('.image'))
3) Appended image to div
HTML
<div class="image"> </div>
JS
var $img = '<img src="https://skypeblogs.files.wordpress.com/2013/05/skype-button.png"/>';
$('.image').append($img);
JSFIDDLE DEMO

if you are using jquery, you can just do
var htmlString = '<div><figure><img src="some image src" /></figure></div>';
$('#ImageContainer').html(htmlString);
but if you are wanting to insert the div/figure and image separately, then you'd be best giving it some sort of identifier, i.e.
var htmlString = '<div><figure id="myFig"></figure></div>';
$('#ImageContainer').html(htmlString);
$('#myFig').html('<img src="" />');

Setting baseUrl for img tag in HTML fragment

I have a page hosted on domain1 from which I retrieve, with an ajax call, an HTML fragment which include some tags. These tags have a relative src URL and I want to set, for these tag only, a base URL pointing to another domain, say domain2.
Here's an example: I have a String HTMLData with the following value:
'<p> Foo </p> \
<img alt = "Image 1" src = "/relativepath/To/Image1"> \
<div class = "someDiv"> \
<img alt = "Image 2" src = "/relativepath/To/Image2"> \
</div>'
I want to add to my page something like:
'<p> Foo </p> \
<img alt = "Image 1" src = "http://domain2/relativepath/To/Image1"> \
<div class = "someDiv"> \
<img alt = "Image 2" src = "http://domain2/relativepath/To/Image2"> \
</div>'
Of course, I have no idea of the exact structure of the fragment, and I will probably want to extend it to other embedded object tags.
Here is what I have written so far:
function setBaseURLandConstructDiv (HTMLData) {
var container = document.createElement("div");
container.innerHTML = HTMLData;
var images = container.getElementsByTagName("img");
for (var image = 0;image<images.length;image++) {
if (images[image].src) {
images[image].src = 'http://domain2'+ images[image].getAttribute('src');
}
}
return container.innerHTML;
}
It works, but it doesn't seems right to me. In particular, at the line container.innerHTML = HTMLData, the browser make an unnecessary request to http://domain1/relativepath/To/Image1, before making the (correct) call to http://domain2/relativepath/To/Image1 at the line images[image].src = 'http://domain2'+ images[image].getAttribute('src');
So is there another method to modify the src attributes? (Or to locally set a base Url)

what happens when you use HTMLData to get the images for you array?
You could first change the HTMLData and then assign it to the container.

Can't update iframe content with jquery

iframe is loaded dynamically into container div inside function.
With cc.text(content); I try to update #code content.
I check changed text in runtime, it's updated but on screen value remains the same.
I am not a javascript pro, so any comments are welcome:
function ShowEditor(content) {
var url = "XmlEditor/Editor.htm";
slHost.css('width', '0%');
jobPlanContainer.css('display', 'block');
frame = $('<iframe id="' + jobPlanIFrameID + '" src="' + url + '" class="frame" frameborder="0" />');
frame.appendTo(jobPlanIFrameContainer);
$(frame).load(function () {
var ifr = frame[0];
var doc = ifr.contentDocument || ifr.contentWindow.document;
var jdoc = $(doc);
var cc = jdoc.contents().find("#code");
// var tst = cc.text();
// alert(tst);
cc.text(content);
});
}
I get the text in commented code, but fail to update #code content.
iframe holds the following html where I omit details inside head and script:
<!doctype html>
<html>
<head></head>
<body>
<form>
<textarea id="code" name="code">some texts</textarea>
</form>
</body>
</html>

Your XML editor doesn't read more than once what's in the textarea.
A simple solution would be to generate in javascript the iframe content with the desired textarea content instead of loading it and then try to change the textarea content.
In fact (depending on the capacities of your XML Editor), you probably can do that directly in a generated text area instead of using a whole iframe to do it.