Удалить часть строки тегом HTML img

Question

У меня есть эта строка, которая содержит HTML-код, и где-то посередине есть тег изображения.

var html = '<p><p>agsagsa</p><img src="/Service/image.jsp?7D4D25E41ADA46ADE053480001826805">' + 
            '<img src="/Service/image.jsp?7D4D25E41ADA96540MF3480001F04325">hfhfdhfdhfd</p>' + 
            '<p>gfdhfdhfd</p>';

Мне нужно найти его с помощью src и удалить его с начала до концатак что от <img src... до закрывающего тега.

Мне нужно найти правильный src, так как в строке более одного.

Я могу найти индекс правого src, ноне могу понять, как удалить его из строки с помощью ближайшего <img слева и ближайшего закрывающего тега справа.

var html = '<p><p>agsagsa</p><img src="/Service/image.jsp?7D4D25E41ADA46ADE053480001826805">' + 
            '<img src="/Service/image.jsp?7D4D25E41ADA96540MF3480001F04325">hfhfdhfdhfd</p>' + 
            '<p>gfdhfdhfd</p>';
            
            
function findImg(imageSrc) {
  var src = html.indexOf(imageSrc);
  console.log('src = ', src);
}

findImg('/Service/image.jsp?7D4D25E41ADA46ADE053480001826805');

Не могли бы вы рассмотреть его и помочь мне упростить его?

var html = '<p><p>agsagsa</p><img src="/Service/image.jsp?7D4D25E41ADA46ADE053480001826805">' + 
            '<img src="/Service/image.jsp?7D4D25E41ADA96540MF3480001F04325">hfhfdhfdhfd</p>' + 
            '<p>gfdhfdhfd</p>';
            
var originalSrc = '/Service/image.jsp?7D4D25E41ADA46ADE053480001826805';

var startOfSrcIndex = html.indexOf(originalSrc);
console.log('startOfSrcIndex = ', startOfSrcIndex);

var srcLength = originalSrc.length;

var openingTagIndex;

for(var i = startOfSrcIndex-1; i > 1; i--) {
  if(html[i] === '<') {
    openingTagIndex = i;
    break;
  }
}

var closingTagIndex;
console.log('srcLength = ', srcLength);

for(var i = srcLength; i < html.length; i++) {
  if(html[i] === '>') {
    closingTagIndex = i + 1;
    console.log('closingTagIndex = ', closingTagIndex);
    break;
  }
}

console.log('openingTagIndex = ', openingTagIndex);

var image = html.substring(openingTagIndex, closingTagIndex);
console.log(image);

var finalHtml = html.replace(image, '');
console.log('finalHtml = ', finalHtml);

Answer 1

У меня есть другая альтернатива, если вы хотите использовать в своем проекте только Javascript-код без использования Angular.Смотри ниже.

    var html =
      '<p><p>agsagsa</p><img src="/Service/image.jsp?7D4D25E41ADA46ADE053480001826805">' +
      '<img src="/Service/image.jsp?7D4D25E41ADA96540MF3480001F04325">hfhfdhfdhfd</p>' +
      "<p>gfdhfdhfd</p>";
    
    var originalSrc = "/Service/image.jsp?7D4D25E41ADA46ADE053480001826805";
    
    function replaceImgTags(source) {
      var startOfSrcIndex = html.indexOf(source);
      console.log("startOfSrcIndex = ", startOfSrcIndex);
    
      var srcLength = source.length;
    
      var openingTagIndex;
    
      for (var i = startOfSrcIndex - 1; i > 1; i--) {
        if (html[i] === "<") {
          openingTagIndex = i;
          break;
        }
      }
    
      var closingTagIndex;
      console.log("srcLength = ", srcLength);
    
      for (var i = srcLength; i < html.length; i++) {
        if (html[i] === ">") {
          closingTagIndex = i + 1;
          console.log("closingTagIndex = ", closingTagIndex);
          break;
        }
      }
      var image = html.substring(openingTagIndex, closingTagIndex);
    
      var finalHtml = html.replace(image, "");
    
      return finalHtml;
    }
    
    var newOriginalHtml = replaceImgTags(originalSrc);
    
    var newHtmlString = replaceImgTags(newOriginalHtml);
    console.log("New String is: " + newHtmlString);

Возвращает значение и затем использует это значение возвращенной строки newHtmlString для записи его в консоль.

Answer 2

Использование angular.element для создания временного элемента для вставки html-кода и angular.forEach() для циклического просмотра изображений для сравнения, затем remove() соответствия

var imgUrl ='/Service/image.jsp?7D4D25E41ADA46ADE053480001826805'


var html = '<p>agsagsa</p><img src="/Service/image.jsp?7D4D25E41ADA46ADE053480001826805">' + 
            '<img src="/Service/image.jsp?7D4D25E41ADA96540MF3480001F04325">hfhfdhfdhfd</p>' + 
            '<p>gfdhfdhfd</p>';
            
            
var div = angular.element('<div>').append(html);

angular.forEach(div.find('img'), function(el){
  if(el.src.includes(imgUrl)){
     el.remove()
  }
});

html = div.html()
console.log(html)

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>