We Keep Coding

Javascript/jQuery: How to extract attribute/property from an HTML string (value of event.target)?

TLDR: I have a string that's in HTML format and I want to extract some text from it.
example html string (the actual HTML string I'm parsing is the value of event.target)
<div class="dclass">
<div class="dclass1 container">
<p class="pclass11 my-classes-here">text</p>
<img class="img-generic-class another-img-class" alt="my-alt-text1" src="my-img-source-here1">
</div>
<div class="dclass2 container">
<p class="pclass21 my-classes-here">text</p>
<img class="img-generic-class another-img-class" alt="my-alt-text2" src="my-img-source-here2">
</div>
</div>
How to I retrieve the string "my-alt-text2"? I thought of:
converting to DOM but unsure to do it
I tried $.parseHTML on the HTML string (on the actual string I'm working on and not the example string. The actual string is also a lot more complicated that the example) and it returned a null
Thanks

var html = '<div><img class="img-class2" src="#" alt="Your alt here!"></div>'; //Your html string
var tmpDiv = document.createElement('div');
tmpDiv.innerHTML = html;
console.log(tmpDiv.querySelector('.img-class2').getAttribute('alt'));

How to replace text by javascript with other text

I want to convert
<images src="vendor/chessboard.js/img/chesspieces/wikipedia/wR.png" alt="" class="piece-417db" data-piece="wR" style="width: 67px;height: 67px;"></images>
this text into
<img src="vendor/chessboard.js/img/chesspieces/wikipedia/wR.png" alt="" class="piece-417db" data-piece="wR" style="width: 67px;height: 67px;" />
How can i do so ???

You can use sites like this one to come up with the regex flavor you are after
//Switch <images to <img
var pattern = /<images/gi;//declare your regex pattern
var originString = '<images src="asdf">';//the string to go against
console.log(originString);//show the string as is before modding it
console.log(originString.replace(pattern, "<img"));//show the modded string
//remove </images>
var pattern2 = /<\/images>/gi;
var originString2 = '<img src="blahblah"></images>';
console.log(originString2);
console.log(originString2.replace(pattern2, ""));

Using String.replace to transform <images and ></images> occurrences into <img and /> respectively:
const text = '<images src="vendor/chessboard.js/img/chesspieces/wikipedia/wR.png" alt="" class="piece-417db" data-piece="wR" style="width: 67px;height: 67px;"></images>';
const result = text.replace(/<images/gi, '<img').replace(/><\/images>/gi, '/>');
console.log(result); // -> <img ... />

Extract src from the description of rss in javascript

I have a RSS description as follows:
'description: <img src="http://www.afaqs.com/all/news/images/news_story_grfx/2017/50219_1_home_small.jpg" alt=" " hspace="5" align="left" width="59" height="59" border="0"/> The network has also elevated Sanjeet Mehta as head of Disney Consumer Products.'
i have to extract img src from this in jquery.

Consider this approach:
Create a div element with an ID.
In your javascript code, set InnerHTML value to your div with the value of description.
Use querySelectorAll and get the source of the image.
Example:
var description = 'description: <img src="http://www.afaqs.com/all/news/images/news_story_grfx/2017/50219_1_home_small.jpg" alt=" " hspace="5" align="left" width="59" height="59" border="0"/> The network has also elevated Sanjeet Mehta as head of Disney Consumer Products.';
// Set InnerHTML values:
document.getElementById('myDiv').innerHTML = description;
// Get src:
var mySrcValue = document.querySelectorAll('#myDiv > a > img')[0].src;
// Show src value:
document.getElementById('myResult').innerHTML = "<b>" + mySrcValue + "</b>";
<span>This is your div:</span>
<br />
<div id="myDiv"></div>
<br/>
<br/>
<span>IMG SRC Result is:</span>
<div id="myResult"></div>

You don't need jquery to do this, javascript is enough.
You can extract the src attribute with a one line code (split and regex) :
var result = description.split('img')[1].split('alt')[0].match( /"(.*?)"/ )[1];
var description = 'description: <img src="http://www.afaqs.com/all/news/images/news_story_grfx/2017/50219_1_home_small.jpg" alt=" " hspace="5" align="left" width="59" height="59" border="0"/> The network has also elevated Sanjeet Mehta as head of Disney Consumer Products.';
result.innerHTML = description.split('img')[1].split('alt')[0].match( /"(.*?)"/ )[1];
<div id="result"></div>

Using the .map function to create an array of image alt text inside a specific div?

I have a page I'm using to grab image alt text from a slider. Each image has a different alt text, and I'm trying to pull it into an array and then loop through it to display it.
However when I implement it, it only adds one object to the array as opposed to how ever many it may ACTUALLY have inside the div.
$(document).ready(function () {
var tn_array = $("#rightSlider img").map(function () {
return $(this).attr("alt");
});
for (var i = 0; i < tn_array.length; i++) {
alert(tn_array[i]);
$('#links').append('<a href="#" title="' + tn_array[i] + '" >' + tn_array[i] + '</a><br />');
}
});
Here is the main page that the code grabs the alt text from:
<div id="rightSlider">
<div>
<img src="images/adptvtch_s1_1.jpg" alt="Hearing Aid On A Female's Ear" width="330" height="215" />
</div>
<div>
<img src="images/adptvtch_s1_2.jpg" alt="Hands Reading Braille Book" width="330" height="215" />
</div>
<div>
<img src="images/adptvtch_s1_3.jpg" alt="Man In Wheelchair Reading" width="330" height="215" />
</div>
</div>
I've tried other things such as .each and I can't seem to pinpoint why it's only adding the first alt text and not the other ones. If you guys can help me figure it out, I'd be greatly appreciative.

You don't need additional iteration and an unnecessary array manipulation.
Try this,
var xEle = $('#links');
$("#rightSlider img").each(function() {
xEle.append('<a href="#" title="'+ $(this).attr("alt") +'" >'+ $(this).attr("alt") +'</a><br />');
});
DEMO

Changing the inner html with javascript

I have this divs in my html
<img src="images/cocina1.jpg" name = "main_img" alt="alternate_text" height="250" width="150" />
<div class="imgbox" id="thumbnail_1"> <img src="images/cocina1.jpg" alt="alternate_text" height="250" width="150" /> <br />
<p>Medico1</p>
</div>
and the following JS
function changeTo1(){
var newP = "some Paragraph"
document.getElementById('id_descripcion_txt').innerHTML = newP;
document.main_pic.src = "images/medico1.jpg"
document.getElementById('thumbnail_1').innerHTML = " <img src=\"images/cocina0.jpg\" alt=\"alternate_text\" height=%22250%22 width=\"150\" /> <br /> <p>Medico0</p> "
}
Now, after clicking on the image that calls changeTo1(), the first part of the JS works: the 'id_descripcion_txt' does changes its innerHTML to "some Paragraph", but the other 2 statements, of changing main_pic src and the "thumbnail_1" innerHTML to something else don't work.
Any ideas?
Thanks

changing main_pic src and the "thumbnail_1" innerHTML to something
else don't work.
On making the changes,
document.main_img.src = "images/medico1.jpg";
and
height=\"350\" instead of height=%22250%22
it worked for me.

It's probably failing on the image change. I think you want this HTML (note marked change):
<img src="images/cocina1.jpg" id="main_img" alt="alternate_text" height="250" width="150" />
^^^^^^^^^^^^^
And this JS:
document.getElementById("main_img").src = ...
Also, you had different terms for the image ('main_pic' in one, and 'main_img' in the other).

Are you getting a javascript error? Unless there's a typo in your posted code,
document.main_pic
does not exist. Try
document.main_img.src = "images/medico1.jpg";

If you want to change the one of your image through java script, then use this code, here in this example i have a banner and a text, when i click on the button then banner and text both changed.
<html>
<head>
<script type="text/javascript">
function changeImgandText()
{
if(document.getElementById('banner'))
banner.innerHTML = '<img src="img1.jpg"width="100%" height=220>';
demo.innerHTML="Pir you are great !";
}
</script>
<p id='banner'><img src="img2.jpg" width="100%" height=220> </p>
<b id='demo'>dude</b> </br>
<input type='button' onclick='changeImgandText()' value='Change Text'/>
</head>
</html>