Question

我有以下代码。 Variable有一个字符串。我想在任何文字之前移除<img>代码，<a>或<br>代码。

var content='<div class="dir"><a href="/home"><img src="/img.png"/></a><p><br><a class="foo" href="/contact">This</a> is content</p></div>';
content.replace(/<img[^>]*>/g,"");

我已尝试删除<img>标记，但删除了所有标记，我只是在文本之前删除所有不需要的标记（和
）。其次，不应删除带有<a>的{{1}}标记，因为它有一些文字。

它返回：

class foo

简而言之，我想删除文字前的所有图片以及<div class="dir"><a href="/home"></a><p><br><a class="foo" href='/contact'>This</a> is content</p></div>和不需要的链接所有不需要的空格。

Answer 1

使用正则表达式处理HTML非常困难。

它会更简单，更可靠：

创建DOM片段
使用jQuery查找要删除的节点
使用.outerHTML重新合成HTML（如有必要）。

选择规则并不是100％明确，但一般方法看起来像这样：

var content = '<div class="dir"><a href="/home"><img src="/img.png"/></a><p><br><a class="foo" href="/contact">This</a> is content</p></div>';
var $content = $(content); // create unappended DOM fragment
var $allNodes = $content.find("*"); // all nodes inside the outer <div> wrapper
var $textNodes = $allNodes.contents().filter(function() {
    return this.nodeType === 3; // find text nodes
});
$allNodes.not($textNodes.parents()).remove(); // Remove all nodes that do not have a text node amongst their descendants.
$content.find("a").contents().unwrap(); // Unwrap the contents of any remaining <a> nodes.
var HTML = $content.get(0).outerHTML; // resynthesize HTML, with stuff removed
console.log(HTML);

http://jsfiddle.net/w3hreyr1/

Answer 2

如果我正确理解你，那就是你想要做的事。

<div><p><br><img><a class="foo" href="/contact">This</a> is content</p></div>

如果班级foo中有任何文字，那么您希望内容为：

<div><p><a class="foo" href="/contact">This</a> is content</p></div>

没有兄弟<br>，<img>或<p>标记。

如果这是正确的，那么如果你从DOM获得var content，这个jquery解决方案可以工作：

$('.foo').contents().each(function(){
  if(this.nodeType == 3){
    $(this).parent().siblings("br, img, p").remove();
  }
});

这将遍历页面上所有foo类的内容...检查nodeType是否为3（这是文本节点的值）...然后获取兄弟节点的兄弟节点文本节点的父级<br>，<img>或<p>标记标记并将其删除。

JSBin Example

希望这就是你要找的东西。

如果在文本之前删除不需要的标记

2 个答案: