Include image alt text with jQuery text()-CodePudding

With this HTML:

<h1>This is my <img src="https://dummyimage.com/100x50/000/fff&text=BIG" alt="BIG"> title</h1>

In Chrome or Firefox, if I select the rendered text and copy it (Ctrl-C), I'll get

This is my BIG title (the alt text of the image is included in the copied text)

Can I achieve the same using jQuery? $('h1').text() gives me only This is my title (without BIG).

I know I can get the alt text itself with $('h1').attr('alt') but how do I insert it at the correct position in the .text() string?

CodePudding user response：

Basically I pass on all the nodes (not elements) of the designated element. If type=3 then it's text. Otherwise I assume it's an image and take the alt attribute. It's also possible to make a recursion if the element is div for example. Update: made it recursive.

var h1 = document.querySelector("h1");
var h2 = document.querySelector("h2");

console.log(do_elem(h1));
console.log(do_elem(h2));

function do_elem(elem) {
  var nodes = textNodesUnder(elem);
  return nodes.join("");
}

function textNodesUnder(node) {
  var all = [];
  for (node = node.firstChild; node; node = node.nextSibling) {
    if (node.nodeType == 3) {
      all.push(node.nodeValue);
    } else {
      if (node.tagName == 'IMG') {
        all = all.concat(node.getAttribute("alt"));
      } else {
        all = all.concat(do_elem(node))
      }
    }
  }
  return all;
}

<h1>This is my <img src="https://dummyimage.com/100x50/000/fff&text=BIG" alt="BIG"> title</h1>

<h2>This is <span> another <img src="https://dummyimage.com/100x50/000/fff&text=BIG" alt="BIG"> example</span> of recursion</h2>

CodePudding user response：

The quick and dirty way to do it would be to get every image and insert text before or after it, then reverse after your .text() call

$("img").each(function() {
  if (this.getAttribute("alt")) {
    this.parentNode.insertBefore(document.createTextNode(this.getAttribute("alt"), this);
  }
});

You could try to save the created text nodes in a JQuery or other Object so that after your text call you could remove them all. Alternatively, you could iterate through your imgs again and do

parent.removeChild(img.previousNode);

CodePudding user response：

You could try something like this using jQuery methods.

/*Using jQuery clone() to avoid manipualting the DOM*/
const h1 = $('h1').clone();

//Define the alt text value
const imgAlt = h1.find('img').attr('alt');

//Define the img node inside of the h1 element
const h1Img = h1.find('img');

//Use jQuery replace with method to replace the img node with the previously defined alt text
h1Img.replaceWith(imgAlt);

//Define the text inside the string
const text = h1.text();
console.log(text)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>This is my <img src="https://dummyimage.com/100x50/000/fff&text=BIG" alt="BIG"> title</h1>