Javascript（或jquery）获取textarea值的每个图像标签答案

【问题标题】：Javascript (or jquery) to get every image tag of a textarea valueJavascript（或jquery）获取textarea值的每个图像标签
【发布时间】：2015-02-22 09:40:16
【问题描述】：

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

<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

【问题讨论】：

标签： javascript jquery image tags textarea

【解决方案1】：

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')));

更新了！

【讨论】：

仅在 textarea 内部，表示如果 textarea 具有以下值：127.0.0.7/uploads/images/20150222-54e9a561cb65d.jpg" height="68" width="99">

测试
te

stas
d

127.0.0.7/uploads/images/…> 我只需要那些的 src，省略其他的

【解决方案2】：

您可以使用 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>

【讨论】：

行不通，它还会选择 textarea 之外的元素，我尝试使用它仅选择带有 document.getElementsById 的 textarea 并将其与 querySelectorAll 结合，但它什么也不返回（用 Mozilla 测试）

【解决方案3】：

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

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());

【讨论】：