jQuery 删除 textarea 中的 img 但保留 alt 属性并删除所有 div

jQuery Remove img in textarea but keep the alt attribute and remove all div

我有一些文本区域,里面的内容包含 img & div。 我需要删除所有 img 和 div。但保留 img 的 alt。

在下面的代码片段中,它删除了所有 img 和 div。

$('textarea').val(function(i, val) {
  return $('<div>').html(val).text();
});
textarea {
  width: 250px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="mycontent">
  <textarea>some img
    <img src='whatever1.gif' alt='Title 1'>in text area
    <img src='whatever2.gif' alt='Title 2'>must be gone but keep img alt.
    <img src='whatever3.gif' alt='Title 3'>all div must gone.
    <div id="someID fromdiv">
      <div></div>
    </div>
  </textarea>
</div>


<div class="mycontent">
  <textarea>ANOTHER some img
    <img src='whatever4.gif' alt='Other Title 4'>in text area
    <img src='whatever5.gif' alt='Title 5'>must be gone but keep img alt.
    <img src='whatever6.gif' alt='Other Title'>all div must gone.
    <div id="someID" class="classDiv">
      <div></div>
    </div>
  </textarea>
</div>

保持 img 的 alt 不被删除的最佳方法是什么?

非常感谢任何指南。

谢谢。

下面的代码对你有帮助,但我不明白为什么你在文本区域写 html 它无效 html 代码

 <script type="text/javascript">
        function RemoveAllImge() {
            $("#YourTextAreaID img").each(function () {
                $(this).attr('src', '');
            });
        };
        function RemoveAllDiv() {
            $("#YourTextAreaID div").each(function () {
                $(this).remove();
            });
        };
    </script>

在删除包含的 HTML.

之前,将图像替换为它们的 alt 属性
$('textarea').val(function (i, val) {
    return $('<div>').html(val)
                // replace images with their alt attribute
                .find("img").replaceWith(function() {
                    return this.alt;
                }).end()
                .text();
});

$('textarea').val(function (i, val) {
    return $('<div>').html(val)
                // replace images with their alt attribute
                .find("img").replaceWith(function() {
                    return this.alt;
                }).end()
                // remove any html
                .text();
});
textarea {
  width: 500px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="mycontent">
    <textarea>some img
        <img src='whatever1.gif' alt='Title 1' />in text area
        <img src='whatever2.gif' alt='Title 2' />must be gone but keep img alt.
        <img src='whatever3.gif' />all div must gone.
        <div id="someID fromdiv">
            <div></div>
        </div>
    </textarea>
</div>
<div class="mycontent">
    <textarea>ANOTHER some img
        <img src='whatever4.gif' alt='Other Title 4' />in text area
        <img src='whatever5.gif' alt='Title 5' />must be gone but keep img alt.
        <img src='whatever6.gif' alt='Other Title' />all div must gone.
        <div id="someID" class="classDiv">
            <div></div>
        </div>
    </textarea>
</div>