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

【问题标题】：jQuery Remove img in textarea but keep the alt attribute and remove all divjQuery 删除 textarea 中的 img 但保留 alt 属性并删除所有 div
【发布时间】：2015-07-25 09:39:19
【问题描述】：

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

在下面的sn-p中，它删除了所有的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不被删除的最佳方法是什么？

任何指南都非常感谢。

谢谢。

【问题讨论】：

标签： javascript jquery regex textarea

【解决方案1】：

在删除包含的 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>

【讨论】：

【解决方案2】：

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

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

【讨论】：