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

使用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>

Answer 2

如果您只想在项目中使用纯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字符串的值将该值记录到控制台。

通过HTML img标签删除字符串的一部分

2 个答案: