Question

我有一个html字符串，我需要在第一次出现<div class="c和第一次关闭标记>以及最后一个结束标记“</div>”之间删除所有内容。第一个，应该是这个，因为它是动态生成的类。

例如：<div class="c2029" style="font-size:45px"><p class="auto">Testing 123...</p></div>应转换为<p class="auto">Testing 123...</p>

我尝试了这个，但它删除了所有字符串：

var testString = '<div class="c2029" style="font-size:45px"><p class="auto">Testing 123...</p></div>'
var result = testString.replace(/\<div\_c.*\>/, '');

应该删除的div内容是动态生成的，这是一个例子。

生成动态字符串的更多示例：

var testString = '<div class="c03"><div style="text-align: center">Testing 123...</div></div>';
var testString = '<div class="c435">Hello</div>';
var testString = '<div class="c1980"><a href="stackoverflow.com">TEST</a></div>';

Answer 1

正则表达式是错误的工具。您可以$.parseHTML()然后find()使用[name^=”value”]选择器并使用它：

＆＃13;

var all = ['<div><div class="c2029" style="font-size:45px"><p class="auto">Testing 123...</p></div></div>', '<div><div class="c435">Hello</div></div>', '<div><div class="c1980"><a href="stackoverflow.com">TEST</a></div></div>'];

$.each(all, function(k,s) { f(s); });

function f(s) {
    var nodes = $($.parseHTML(s)); // parse string to jquery object
    var $p = nodes.find('div[class^="c"]'); // select all classes that starts with c

    var inner = $p.prop('innerHTML'); // inner html of $p
    console.log("Inner: " + inner);
 
    $p.html(''); // select children of $p and remove
    var outer = $p.prop('outerHTML'); // outer html of $p
    console.log("Outer: " + outer);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

无需使用正则表达式，您可以使用jQuery $.fn.unwrap实现此目的：

＆＃13;

$('[class^="c"]').children().unwrap()

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="c2029" style="font-size:45px">
  <p class="auto">Testing 123...</p>
</div>

＆＃13;

为了让它更具防弹性，并且只针对课程瞄准的元素＆＃34; c＆＃34;您可以添加其他过滤步骤后使用数字：

$('[class^="c"]').filter(function () {
  return this.className.match(/\bc\d+\b/)
}).children().unwrap()

这种方式不会影响像cello这样的类（以＆＃34; c＆＃34开头）。

Answer 3

基于Stack Overflow答案，我找到了解决我问题的解决方案：

var testString = '<div class="c2029" style="font-size:45px"><p class="auto">Testing 123...</p></div>'
var result = testString.replace(/<div class="c.*?>(.*?)<\/div>/, '$1');
document.write(result);
console.log(result);

解析html字符串并删除一些元素

3 个答案: