java 移除html标签的属性

Posted 2023-04-27

有一段html文本，只想去掉class 和 style属性,但要保留原结构和其他正常属性，就是如下例子

<div class="content">
<div id="t1">
文本1
</div>
<p class="bbb">
文本2.....<font color='#00000'>文本3</font><span style="line-height:24px;">文本4</span>
</p>
</div>

希望最终结果为

<div>
<div>
文本1
</div>
<p>
文本2.....<font color='#00000'>文本3</font><span style="line-height:24px;">文本4</span>
</p>
</div>

用java写的话要怎么处理，谢谢
好了，谢谢大家啦，我自己去学习了下正则表达式自己解决了问题。
public static String delHTMLTag(String htmlStr)
String regEx_style = "(class|style)=\"[A-Za-z0-9]*[^%:&’,;=?$x22]+[A-Za-z0-9]*\""; // 定义style、class的正则表达式

Pattern p_style = Pattern
.compile(regEx_style);
Matcher m_style = p_style.matcher(htmlStr);
System.out.println(m_style);
htmlStr = m_style.replaceAll(""); // 过滤style、class属性

return htmlStr; // 返回文本字符串

针对于你提的问题，如果想去掉class和style属性必须对所需要去掉属性的标签增加id
以你提供的代码为例，首先需要增加id属性，修改后如下：
<div class="content" id=“testdiv”>
<div id="t1">
文本1
</div>
<p class="bbb" id=“testp”>
文本2.....<font color='#00000'>文本3</font><span style="line-height:24px;">文本4</span>
</p>
</div>

然后编写对应js代码，代码如下：
function delClass()
$("#testdiv").removeClass("content");
$("#testp").removeClass("bbb");

上述代码可以去除Class
注：
如果程序为进入页面后调用则需要在body中增加onload方法也就是：onload="delClass();"
如果为点击式触发则在页面增加按钮，对按钮总方法onClick方法指定删除的js方法

希望回答对你有用。追问

要用java，因为我项目要用java来大量删除那些属性

追答

java包括很多东西，不清楚是什么，什么类型的工程，说的清楚一些，会更好的帮助到你，最好是贴出写你说的java的代码。这样一起分析分析，会更好

参考技术A import java.io.*;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
/**
*
* 使用正则表达式
*
*/
public class patternTest
public static void main(String[] args) throws IOException
Pattern patternClass = Pattern.compile(" (class|style)=\".*\"");
Reader buff = new FileReader("c:\\html.txt");
FileWriter write = new FileWriter("c:\\target.txt");
BufferedReader in = new BufferedReader(buff);
String s ;
while ((s=in.readLine())!=null)
Matcher matcher = patternClass.matcher(s);
if(matcher.find())
s = matcher.replaceAll("");
System.out.println(s);
else
System.out.println(s);

write.write(s+"\n");

write.close();
in.close();



html.txt 是你要处理的文本，

taget.txt是处理之后的文本，也直接在控制台打印出来了。

妹的。终于出来了。。 参考技术B 我怎么觉得不要用JAVA，要JS比较好呢。。还简单。。你这不明显，我给你加了背景，效果能明显点
<div id="a" class="content">
<div id="t1">
文本1
</div>
<p class="bbb" id="b" style="background: #0FFF00">
文本2.....<font color='#00000'>文本3</font><span style="line-height:24px;">文本4</span>
</p>
<input type="button" value="点我去" onclick="abc()">
</div>

js中的代码：
function abc()
document.getElementById("a").class="";

document.getElementById("b").class="";
document.getElementById("b").style.background="";
追问

如果一万个这样的网页，是不是要写一万多个js？我的是要java大批量删除多个html里面的class和style属性，并不是一个而已

追答

那我想问一下：如果不是所有的项目都要移除呢，您写正则表达式是可以，有10000个页面，但是你把里面所有的属性都移除，那些还要效果的怎么办，您怎么区分那些还想要的属性呢？

参考技术C 用js把class和style置空追问

要用java，因为我项目要用java来大量删除那些属性

参考技术D java不是javascript...

前端08 /jQuery标签操作事件

目录

• 前端08 /jQuery标签操作、事件
  • 1.标签内文本操作
    • 1.1 html标签元素中的所有内容
    • 1.2 text 标签元素的文本内容
  • 2.文档标签操作
    • 2.1值操作
    • 2.2插入标签
    • 2.3 删除标签 remove、detach和empty
    • 2.4 (替换)修改标签 replaceWith和replaceAll
    • 2.5 克隆标签 clone
  • 3.属性操作
    • 3.1 attr() 设置属性值、者获取属性值
    • 3.2 removeAttr() 移除属性
    • 3.3 prop()
  • 4.class类属性
    • 4.1 addClass添加类名
    • 4.2 removeClass移除类名
    • 4.3 toggleClass类的切换
  • 5.val 表单控件value属性
  • 6.css样式
  • 7.盒子样式属性
    • 7.1 内容 : 宽度(width)和高度(height)
    • 7.2 内容+padding : 宽度(innerWidth)和高度(innerHeight)
    • 7.3 内容+padding+border : 宽度(outerWidth)和高度(outerHeight)
  • 8.滚动条距离属性
  • 9.jQuery的事件操作
    • 9.1 绑定事件
    • 9.2 常见事件
    • 9.3 解绑事件
    • 9.4 补充 一次性事件
    • 9.5事件冒泡
    • 9.6 事件委托（事件代理）

前端08 /jQuery标签操作、事件

1.标签内文本操作

1.1 html标签元素中的所有内容

//获取值：获取选中标签元素中所有的内容
$('#box').html();  

//设置值：设置该元素的所有内容 会替换掉 标签中原来的内容
$('#box').html('<a href="https://www.baidu.com">百度一下</a>'); 

1.2 text 标签元素的文本内容

//获取值：获取选中标签元素中的文本内容
$('#box').text();

//设置值：设置该所有的文本内容
$('#box').text('<a href="https://www.baidu.com">百度一下</a>');

注意：text()方法接收的值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中

2.文档标签操作

2.1值操作

取值:
    文本输入框:$('#username').val();
1.input,type=radio单选框: $('[type="radio"]:checked').val();,首先找到被选中的标签,再进行取值
2.input,type=checkbox多选框: 通过val方法不能直接获取多选的值,只能拿到一个,想拿到多个项的值,需要循环取值
        var d = $('[type="checkbox"]:checked');
        for (var i=0;i<d.length;i++)
            console.log(d.eq(i).val());
        
3.单选下拉框select: -- $('#s1').val();
4.多选下拉框select: -- $('#s2').val(); -- ['1','2']

设置值
1.文本输入框: -- $('#username').val('xxx');
2.input,type=radio单选框: -- $(':radio').val(['1']) 找到所有的radio,然后通过val设置值,达到一个选中的效果.
3.给单选或者多选框设置值的时候,只要val方法中的值和标签的value属性对应的值相同时,那么这个标签就会被选中.
    此处有坑:$(':radio').val('1');这样设置值,不带中括号的,意思是将所有的input,type=radio的标签的value属性的值设置为1.
    
4.input,type=checkbox多选框: -- $(':checkbox').val(['1','2']);
    
5.单选下拉框select: -- $('#s1').val(['3']);
6.多选下拉框select: -- $('#s2').val(['1','2']);
    
    统一一个方法:
        选择框都用中括号设置值.

2.2插入标签

append和appendTo

//追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素
父元素.append(子元素)

//追加到某元素，子元素添加到父元素
子元素.appendTo(父元素)

//append
var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$('ul').append('<li>1233</li>');
$('ul').append(oli);
$('ul').append($('#app'));

//appendTo
$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')

PS:如果追加的jquery对象原本在文档树中，那么这些元素将从原位置上消失。简言之，就是移动操作。

prepend和prependTo

// 前置添加， 添加到父元素的第一个位置
父元素.prepend(子元素)；

// 前置添加， 添加到父元素的第一个位置
子元素.prependTo(父元素)；

// prepand
$('ul').prepend('<li>我是第一个</li>')
// prependTo
$('<a href="#">路飞</a>').prependTo('ul')

after和insertAfter

// 在匹配的元素之后插入内容 
兄弟元素.after(要插入的兄弟元素)；
要插入的兄弟元素.inserAfter(兄弟元素)；


$('ul').after('<h4>我是一个h3标题</h4>')
$('<h5>我是一个h2标题</h5>').insertAfter('ul')

before和insertBefore

// 在匹配的元素之前插入内容
兄弟元素.before(要插入的兄弟元素)；
要插入的兄弟元素.inserBefore(兄弟元素)；
 
//示例
$('ul').before('<h3>我是一个h3标题</h3>')
$('<h2>我是一个h2标题</h2>').insertBefore('ul')

2.3 删除标签 remove、detach和empty

//删除节点后，事件也会删除（简言之，删除了整个标签）
$(selector).remove(); 

// 删除节点后，事件会保留
$(selector).detach(); 

// 清空选中元素中的所有后代节点
$(selector).empty(); 

// remove
$('ul').remove();

// detach
var $btn = $('button').detach()
$('ul').append($btn) //此时按钮能追加到ul中

//empty
$('ul').empty() //清空掉ul中的子元素，保留ul

2.4 (替换)修改标签 replaceWith和replaceAll

// selector被替换：将所有匹配的元素替换成指定的string、js对象、jquery对象。
$(selector).replaceWith(content);

// selector被替换：将所有的匹配的元素替换成p标签。
$('<p>哈哈哈</p>')replaceAll(selector);

// replaceWith 
$('h5').replaceWith('<a href="#">hello world</a>') //将所有的h5标题替换为a标签
$('h5').replaceWith($('#app')); //将所有h5标题标签替换成id为app的dom元素

// replaceAll
$('<br/><hr/><button>按钮</button>').replaceAll('h4')

2.5 克隆标签 clone

// 克隆匹配的DOM元素
$(选择器).clone();

$('button').click(function() 

 // 1.clone()：克隆匹配的DOM元素
 // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
  $(this).clone(true).insertAfter(this);
)

示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <button class="btn">屠龙宝刀,点击就送!</button>
</body>

<script src="jquery.js"></script>
<script>
    $('.btn').click(function () 
        // var btnEle = $(this).clone(); // 不带参数的克隆不能克隆绑定的事件
        var btnEle = $(this).clone(true); // 参数写个true,就能复制事件
        $(this).after(btnEle);
    )
</script>

</html>

3.属性操作

3.1 attr() 设置属性值、者获取属性值

//获取值：attr()设置一个属性值的时候 只是获取值
$('div').attr('id')
$('div').attr('class')

//设置值
$('div').attr('class','box') //设置一个值
$('div').attr(name:'hahaha',class:'happy') //设置多个值

3.2 removeAttr() 移除属性

//删除单个属性
$('#box').removeAttr('name');
$('#box').removeAttr('class');

//删除多个属性
$('#box').removeAttr('name class');

3.3 prop()

// 查看属性
$(selector).prop(property)

// 设置属性
$(selector).prop(property,value)

// 设置多个属性
$(selector).prop(property:value, property:value,...)

$('input').attr('checked')
"checked"

$('input').prop('checked')
true

$('input').prop('cheched',false)  //设置取消选中

prop和attr方法的区别:
总结一下：
    1.对于标签上有的能看到的属性和自定义属性都用attr
    2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
    具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
    checked示例:
        attr():
            查看值,checked 选中--'checked'  没选中--undefined
                $('#nv').attr('checked':'checked'); 
            设置值,attr无法完成取消选中
                $('#nv').attr('checked':'undefined');
                $('#nv').attr('checked':undefined);
                
         prop():
            查看值,checked 选中--true  没选中--false
                $(':checkbox').prop('checked');
            设置值:
                $(':checkbox').prop('checked',true);
                $(':checkbox').prop('checked',false);

4.class类属性

4.1 addClass添加类名

// 为每个匹配的元素添加指定的类名。
$('div').addClass("box");//追加一个
$('div').addClass("box box2");//追加多个

4.2 removeClass移除类名

// 从所有匹配的元素中删除全部或者指定的类。
$('div').removeClass('box')；//移除box类
$('div').removeClass();//移除全部的类

4.3 toggleClass类的切换

// 如果存在（不存在）就删除（添加）一个类。
$('div').toggleClass('box')

$('span').click(function()
    //动态的切换class类名为active
    $(this).toggleClass('active')
)

5.val 表单控件value属性

// 获取值：用于表单控件中获取值，比如input textarea select等等
$(selector).val()

// 设置值：
$('input').val('设置了表单控件中的值')；

6.css样式

// css(直接修改css的属性来修改样式)
$("div").css('color'); //获取

$("p").css("color", "red"); //设置
$("p").css("color":"red","background-color":"yello"); // 设置多个

7.盒子样式属性

7.1 内容 : 宽度(width)和高度(height)

// 宽度
.width() //获取宽度 返回匹配元素中第一个元素的宽，一个没有单位的数值
.width( value ) //设置宽度

//高度
.height() //获取高度 返回匹配元素中第一个元素的高，一个没有单位的数值
.height( value ) //设置高度

7.2 内容+padding : 宽度(innerWidth)和高度(innerHeight)

// 内部宽
.innerWidth() // 获取
.innerWidth(value);//设置

// 内部高
.innerHeight() // 获取
.innerHeight(value); //设置

7.3 内容+padding+border : 宽度(outerWidth)和高度(outerHeight)

// 外部宽
 .outerWidth() //获取第一个匹配元素 ：内容+padding+border的宽
 .outerWidth(true) //获取第一个匹配元素：内容+padding+border+margin的宽

 .outerWidth(value) //设置多个，调整的是“内容”的宽

//外部高
 .outerHeight() //第一个匹配元素：获取内容+padding+border的高
 .outerHeight(true) //第一个匹配元素：获取内容+padding+border+margin的高

 .outerHeight( value ) //设置多个，调整的是“内容”的高

8.滚动条距离属性

// 水平方向
.scrollLeft()      //获取
.scrollLeft( value )//设置

// 垂直方向
.scrollTop() //获取
.scrollTop( value ) //设置

9.jQuery的事件操作

9.1 绑定事件

绑定事件的两种方式:
    // 绑定事件的方式1
    // $("#d1").click(function () 
    //     $(this).css('background-color','green');
    // )

    // 方式2
    $('#d1').on('click',function () 
        $(this).css('background-color','green');
    )

示例：当每个p标签被点击的时候，弹出其文本

$("p").on("click", function()
  alert( $(this).text() );
);

你可以在事件处理之前传递一些附加的数据。

function handler(event) 
//event.data 可以获取bind()方法的第二个参数的数据
  alert(event.data.foo);

$("p").on("click", foo: "bar", handler)

9.2 常见事件

click(function()...)  //点击
hover(function()...)  //悬浮
blur(function()...)   //光标离开
focus(function()...)  //光标聚焦
change(function()...) //内容发生变化，input，select等
keyup(function()...)  
mouseover/mouseout
mouseenter/mouseleave
mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象
复制代码

通过返回false来取消默认的行为并阻止事件起泡。

$("form").bind("submit", function()  return false; )

或通过event.preventDefault() 方法阻止事件起泡

$("form").bind("submit", function(event)
  event.stopPropagation();
);

示例:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #d1
                background-color: red;
                height: 200px;
                width: 200px;
            
            #d2
                background-color: green;
                height: 200px;
                width: 200px;
            

            .dd1
                background-color: yellow;
                height: 40px;
                width: 40px;
            
            .dd2
                background-color: pink;
                height: 40px;
                width: 40px;
            

        </style>
    </head>
    <body>



    <div id="d1">
        <div class="dd1"></div>
    </div>
    <div id="d2">
        <div class="dd2"></div>
    </div>

    用户名:<input type="text" id="username">


    <br>

    <!--<select name="" id="s1">-->
    <!--    <option value="1">上海</option>-->
    <!--    <option value="2">深圳</option>-->
    <!--    <option value="3">贵州</option>-->
    <!--</select>-->

    <input type="text" id="xxx">

    </body>
    <script src="jquery.js"></script>
    <script>
        // 绑定事件的方式1
        // $("#d1").click(function () 
        //     $(this).css('background-color','green');
        // )

        // 方式2
        // $('#d1').on('click',function () 
        //     $(this).css('background-color','green');
        // );
        //
        // // 获取光标触发的事件
        // $('#username').focus(function () 
        //     $(this).css('background-color','green');
        // );
        // // 失去光标触发的事件
        // $('#username').blur(function () 
        //     $(this).css('background-color','white');
        // );
        // // 域内容发生变化触发的事件,一般用于select标签
        // $('#s1').change(function () 
        //      // $('#d1').css('background-color','black');
        //     console.log('xxxxx')
        //
        // );

        // $('#xxx').change(function () 
        //     console.log($(this).val());
        // )

       输入内容实时触发的事件,input事件只能on绑定
        // $('#xxx').on('input',function () 
        //     console.log($(this).val());
        // );
        //
        // //绑定多个事件 事件名称空格间隔
        // $('#xxx').on('input blur',function () 
        //     console.log($(this).val());
        // )


        // 鼠标进入触发的事件
        // $('#d1').mouseenter(function () 
        //     $(this).css('background-color','green');
        // );
        // // 鼠标离开触发的事件
        // $('#d1').mouseout(function () 
        //     $(this).css('background-color','red');
        // );

        // hover事件 鼠标进进出出的事件
        // $('#d1').hover(
        //     // 鼠标进入
        //     function () 
        //         $(this).css('background-color','green');
        //     ,
        //     // 鼠标离开
        //     function () 
        //         $(this).css('background-color','red');
        //     
        // );


        $('#d1').mouseenter(function () 
            console.log('xxx');
        );
        $('#d2').mouseover(function () 
            console.log('ooo');
        );
        // 键盘按下
           // $(window).keydown(function (e) 
            //     console.log(e.keyCode);
            //
            // );
         // 键盘抬起
            $(window).keyup(function (e) 
                console.log(e.keyCode);
            );

    </script>
    </html>

9.3 解绑事件

.off( events [, selector ][,function()])
　　　　off() 方法移除用 .on()绑定的事件处理程序。

　　　　　　$("li").off("click")；就可以了

　　　　　　1.events： 事件
　　　　　　2.selector: 选择器（可选的）
　　　　　　3.function: 事件处理函数

9.4 补充 一次性事件

one(type,data,fn)

描述：为每一个匹配元素的特定事件（像click）绑定一个*一次性*的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同

type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn (Function) : 绑定到每个匹配元素的事件上面的处理函数

示例：当所有段落被第一次点击的时候，显示所有其文本。

$("p").one("click", function()
//只有第一次点击的时候才会触发，再次点击不会触发了
  alert( $(this).text() );
);

9.5事件冒泡

    // 事件冒泡,子标签和父标签(祖先标签)绑定了相同的事件,比如点击事件,那么当你点击子标签时,会一层一层的往上触发父级或者祖父级等等的事件
    $('.c1').click(function () 
        alert('父级标签!!!');

    );
    $('.c2').click(function (e) 
        alert('子标签~~~');
        // 阻止事件冒泡(阻止事件发生)
        return false; //方式1
        // e.stopPropagation() // 方式2
    )

9.6 事件委托（事件代理）

原理：
    利用冒泡的原理，把事件加到父级上，触发执行效果。
    
    <div id="d1">
        <button class="btn">屠龙宝刀,点击就送!</button>.
        
    </div>

    // 事件委托
    $('#d1').on('click','.btn',function () 
          // $(this)是你点击的儿子标签
        var a= $(this).clone();
        $('#d1').append(a);
    );
//中间的参数是个选择器，前面这个$('table')是父级标签选择器，选择的是父级标签，意思就是将子标签（子子孙孙）的点击事件委托给了父级标签
//但是这里注意一点，你console.log(this)；你会发现this还是触发事件的那个子标签，这个记住昂

作业1思路

绑定点击事件
1 获取input标签中的值val
2 val().trim().length 
3 =0  
    方式1:提前在input标签后面放一个span标签,加一个类值color:red,找到span并添加文本内容, .text() .html()
4 如果不等于0,清空span中的内容

作业3

1 模态对话框结合点击事件完成弹出和隐藏
2 点击取消,关闭对话框
3 点击确认,关闭对话框,获取用户输入的内容
4 拼接一个tr标签,将数据放到里面的td标签里面,然后将tr标签放到tbody标签内部的后面

5 开除,点击这一行的那个开除按钮,就将本行tr标签删除 remove方法