Javascript(或jquery）来获取文本区域值的每个图像标记

Javascript (or jquery) to get every image tag of a textarea value

本文关键字：图像 区域 取文本 jquery 获取 Javascript      更新时间：2024-03-15

所以假设我有一个文本区域，其值为：

<p>..random content..</p>
<img src="myimage1.jpg" />
<p>..random content..</p>
<img src="myimage2.png" />
<p>..random content..</p>

我想检查每个img标记的出现情况，并将src存储在一个数组中。类似这样的东西：

function img_find() {
    var imgs = // the result of the checking of the textarea
    var imgSrcs = [];
    for (var i = 0; i < imgs.length; i++) {
        imgSrcs.push(imgs[i].src);
    }
    return imgSrcs;
}

我该如何做到这一点？

已解决

通过将其附加到另一个隐藏的div，类似于以下内容：

  $('#hiddenContent').append $('textarea[name=content]').val()   $img
= $('#hiddenContent').find('img')   $("#hiddenContent > img").each (i, ele) ->
    html = '<div class="image">
                <img src="' + $(ele).attr('src') + '" class="thumbnail" width="100" title="Click to remove" />
                <p>Image location: <b>' + $(ele).attr('src') + '</b> (copy <b>bolded</b> text to use on your content)</p>
                <p><small>click image to remove</small></p>
                </div>'
    $('.contentImages').append html

function getSrc(textarea) {
    var temporaryElement = document.createElement('div');
    temporaryElement.innerHTML = textarea.value;
    var images = temporaryElement.getElementsByTagName('img');
    var output = [];
    for (var i = 0; i < images.length; i++) {
        output.push(images[i].src);
    }
    return output;
}
console.log(getSrc(document.getElementById('textarea')));

更新！

您可以使用CSS选择器querySelectorAll()https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

例如使用lodash unescape

<textarea id="content">
  <p>..random content..</p>
  <img src="myimage1.jpg" />
  <p>..random content..</p>
  <img src="myimage2.png" />
  <p>..random content..</p>
</textarea>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.3.0/lodash.min.js"></script>
<script>
function img_find(id) {
  var dom = document.getElementById(id);
  var e = document.createElement('div');
  e.innerHTML = _.unescape(dom.innerHTML); // Or use regex to replace &lt; to < and &gt; to >
  var imgs = e.querySelectorAll('img');
  var srcCollection = [];
  for (var i = 0; i < imgs.length; i++) {
    srcCollection.push(imgs[i].src);
  }
  return srcCollection;
}
img_find('content'); // ["myimage1.jpg", "myimage2.jpg"]
</script>

这是您应该做的，使用正则表达式：

JSFIDDLE：http://jsfiddle.net/ewh8qe0t/1/

function img_find() {
  var imgs = '<p>..random content..</p><img src="myimage1.jpg" /><p>..random content..</p><img src="myimage2.png" /><p>..random content..</p>';
  var regex=/src="([A-z]+'d*'.[A-z]{3})"/g;
  var imgSrcs = [], found;
  while (found = regex.exec(imgs)) {
    imgSrcs.push(found[0].split('=')[1].replace(/"/g,''));
  }
  return imgSrcs;
}
alert(img_find());
相关文章：