怎样把这段去除html标签的javascript代码放入我的代码

qq_19238141 2017-07-07 11:45:49
我想在粘贴从网页复制的文字内容时，仅粘贴文本，去掉所有格式。
在网上找了一段代码如下：


<script type= "text/javascript " >

String.prototype.stripHTML =function() {varreTag = / <(?:.|\s)*? >/g;returnthis.replace(reTag, " ");

}

varsTest = " <b >this would be bold </b > ";

alert(sTest.stripHTML());

</script >

<body >

</body >


怎样放入我的代码中，使粘贴时仅是文本。
我的代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html lang="zh-cn">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="ie=edge"/>

</head>

<style>

/* 浮动列表==================================================== */

tr>td>div>ul{

position: fixed;

    top: 0px;

    left: 0px;

}

 

 

/*  列表样式===================================================  */

*{ margin:0px; padding:0px; font-size:22px; }

#menu{ width:160px; border:1px solid #ccc;}

#menu ul{ list-style:none;}

#menu ul li{ height:28px; line-height:28px; background:#FFCCFF; border-bottom:1px solid #333333; padding:0px 8px;position:relative;}

#menu ul li:hover ul{ display:block;}

#menu ul li ul{ display:none;position: absolute; left: 100px; top: 0px;width:100px; border:1px solid #ccc; border-bottom:none;}

a{color: #000000;text-decoration: none;}

a:hover{ color:blue;background:red;}

/* a:hover{ color:#00FFFF;} */

 

 

     

#第一列{

text-align:center               

}

#第二列{

text-align:right                

}

#第三列{

text-indent:40px                

}

#第四列{

text-indent:40px

}

#第五列{

text-indent:40px

}

 

 

div{

max-width:1000px;                  

width:auto; 

min-height:20px;                          

padding:3px;                    

line-height:30px;             

word-wrap:break-word;            

overflow-x:hidden;               

overflow-y:auto;                 

font-family:仿宋;                 

color:blue;                       

font-size:20px;                   

margin:2px auto;                  

 

}

 

.border{

border: 1px solid #FF0000; 

}

 

/* 列表项背景色跟随焦点div变化==================================== */

.listyle{

background-color:blue;

width:100px;

}

/* =============================================================== */

 

</style>

<body>

<table border=1 width="100%">

<tr>

<td width="160px"

bgcolor="skyblue"

valign="top"

line-height:20px; 

>

 

<div id="menu"> 

<ul>

<li><a href="2.html#第一列">第一列</a></li>

<li><a href="2.html#第二列">第二列</a></li>

<li><a href="2.html#第三列">第三列</a></li>

<li><a href="2.html#第四列">第四列</a></li>

<li><a href="2.html#第五列">第五列</a></li>

</ul>

</td><td>

 

<div ID="第一列" contenteditable="true" onblur="setBlur(this,'第一列-表A-窗口A')" onfocus="setFocus(this,'第一列-表A');">绑定表A第一列</div> 

<div ID="第二列" contenteditable="true" onblur="setBlur(this,'第二列-表A-窗口A')" onfocus="setFocus(this,'第二列-表A');">绑定表A第二列</div> 

<div ID="第三列" contenteditable="true" onblur="setBlur(this,'第三列-表A-窗口A')" onfocus="setFocus(this,'第三列-表A');">绑定表A第三列</div> 

<div ID="第四列" contenteditable="true" onblur="setBlur(this,'第四列-表A-窗口A')" onfocus="setFocus(this,'第四列-表A');">绑定表A第四列</div> 

<div ID="第五列" contenteditable="true" onblur="setBlur(this,'第五列-表A-窗口A')" onfocus="setFocus(this,'第五列-表A');">绑定表A第五列</div> 

 

</td></tr></table>

</body>

 

<script>

 

/* 列表项背景色跟随焦点div变化============================================ */

function setClick(num){

var theNumber=parseInt(num)-1;

var liList=document.getElementsByTagName("li");

var listLength=liList.length;

for(var i=0;i<listLength;i++){

liList[i].className="";

}

liList[theNumber].className="listyle";

}

/* ======================================================================== */

 

 

 

function setFocus(obj,str2) {

                    obj.setAttribute("class", "border");

                    window.external.setPosition(str2);

}

 

function setBlur(obj, str2) {

    obj.setAttribute("class", "");

     

     window.external.setCurrentValue(obj.innerHTML, str2); 

         

 

}

 

function init(s1, s2, s3, s4, s5) {

    document.getElementById("第一列").innerHTML = s1.replace(/\r\n/g,"<p>");     

    document.getElementById("第二列").innerHTML = s2.replace(/\r\n/g,"<p>");     

    document.getElementById("第三列").innerHTML = s3.replace(/\r\n/g,"<p>");

    document.getElementById("第四列").innerHTML = s4.replace(/\r\n/g,"<p>");

    document.getElementById("第五列").innerHTML = s5.replace(/\r\n/g,"<p>");

     

}

 

function setElementFocus(name) {

    var obj = document.getElementById(name);

    if(obj != null) {

        obj.focus();

        setFocus(obj);

        location.href = "#" + name;

    }

}

</script>

 

</html>
...全文
264 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq_19238141 2017-07-12
  • 打赏
  • 举报
 回复
引用 5 楼 showbo 的回复:
不替换br就行了 String.prototype.stripHTML = function () { var reTag = /<\/?(?!br)[^>]*>/ig; return this.replace(reTag, " "); }
谢谢版主！ 我把 ?!br 改成了 ?!br|p ，基本解决了大部分问题： String.prototype.stripHTML = function () { var reTag = /<\/?(?!br|p)[^>]*>/ig; return this.replace(reTag, " "); } 只是个别网站中以p或br开头的代码没能清除掉，比如网页中的类似代码： <pstyle="font:14px/20.66pxsimsun;list-style:none;margin:0px0px5px;padding:0px;border:0pxcurrentColor;border-image:none;text-align:left;color:rgb(50,62,50);text-transform:none;text-indent:0px;letter-spacing:normal;word-spacing:0px;white-space:normal;-ms-word-break:normal;-ms-word-wrap:normal;font-size-adjust:none;font-stretch:normal;background-color:rgb(236,236,228);-webkit-text-stroke-width:0px;"> 能不能仅保留<br>或<p>完全匹配的格式标签，把不完全匹配的但包含有br或p字符串的标签清除？
qq_19238141 2017-07-11
  • 打赏
  • 举报
 回复
引用 5 楼 showbo 的回复:
不替换br就行了 String.prototype.stripHTML = function () { var reTag = /<\/?(?!br)[^>]*>/ig; return this.replace(reTag, " "); }
我贴上代码，版主试试： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
</head>
<style>
/* 浮动列表==================================================== */
tr>td>div>ul{
position: fixed;
    top: 0px;
    left: 0px;
}
  
  
/*  列表样式===================================================  */
*{ margin:0px; padding:0px; font-size:22px; }
#menu{ width:160px; border:1px solid #ccc;}
#menu ul{ list-style:none;}
#menu ul li{ height:28px; line-height:28px; background:#FFCCFF; border-bottom:1px solid #333333; padding:0px 8px;position:relative;}
#menu ul li:hover ul{ display:block;}
#menu ul li ul{ display:none;position: absolute; left: 100px; top: 0px;width:100px; border:1px solid #ccc; border-bottom:none;}
a{color: #000000;text-decoration: none;}
a:hover{ color:blue;background:red;}
/* a:hover{ color:#00FFFF;} */
  
  
      
#第一列{
text-align:center               
}
#第二列{
text-align:right                
}
#第三列{
text-indent:40px                
}
#第四列{
text-indent:40px
}
#第五列{
text-indent:40px
}
  
  
div{
max-width:1000px;                  
width:auto; 
min-height:20px;                          
padding:3px;                    
line-height:30px;             
word-wrap:break-word;            
overflow-x:hidden;               
overflow-y:auto;                 
font-family:仿宋;                 
color:blue;                       
font-size:20px;                   
margin:2px auto;                  
  
}
  
.border{
border: 1px solid #FF0000; 
}
  
/* 列表项背景色跟随焦点div变化==================================== */
.listyle{
background-color:blue;
width:100px;
}
/* =============================================================== */
  
</style>
<body>
<table border=1 width="100%">
<tr>
<td width="160px"
bgcolor="skyblue"
valign="top"
line-height:20px; 
>
  
<div id="menu"> 
<ul>
<li><a href="2.html#第一列">第一列</a></li>
<li><a href="2.html#第二列">第二列</a></li>
<li><a href="2.html#第三列">第三列</a></li>
<li><a href="2.html#第四列">第四列</a></li>
<li><a href="2.html#第五列">第五列</a></li>
</ul>
</td><td>
  
<div id="第一列" onpaste="divOnPaste(this)" contenteditable="true" onblur="setBlur(this,'第一列-表A-窗口A')" onfocus="setFocus(this,'第一列-表A');">绑定表A第一列</div>
<div id="第二列" onpaste="divOnPaste(this)" contenteditable="true" onblur="setBlur(this,'第二列-表A-窗口A')" onfocus="setFocus(this,'第二列-表A');">绑定表A第二列</div>
<div id="第三列" onpaste="divOnPaste(this)" contenteditable="true" onblur="setBlur(this,'第三列-表A-窗口A')" onfocus="setFocus(this,'第三列-表A');">绑定表A第三列</div>
<div id="第四列" onpaste="divOnPaste(this)" contenteditable="true" onblur="setBlur(this,'第四列-表A-窗口A')" onfocus="setFocus(this,'第四列-表A');">绑定表A第四列</div>
<div id="第五列" onpaste="divOnPaste(this)" contenteditable="true" onblur="setBlur(this,'第五列-表A-窗口A')" onfocus="setFocus(this,'第五列-表A');">绑定表A第五列</div>
  
</td></tr></table>
</body>
  
<script>
String.prototype.stripHTML = function () { var reTag = /<(?:.|\s)*?>/g; return this.replace(reTag, " "); }
                    function divOnPaste(d) { setTimeout(function () { d.innerHTML = d.innerHTML.stripHTML(); }, 10); }

  
/* 列表项背景色跟随焦点div变化============================================ */
function setClick(num){
var theNumber=parseInt(num)-1;
var liList=document.getElementsByTagName("li");
var listLength=liList.length;
for(var i=0;i<listLength;i++){
liList[i].className="";
}
liList[theNumber].className="listyle";
}
/* ======================================================================== */
  
  
  
function setFocus(obj,str2) {
                    obj.setAttribute("class", "border");
                    window.external.setPosition(str2);
}
  
function setBlur(obj, str2) {
    obj.setAttribute("class", "");
      
     window.external.setCurrentValue(obj.innerHTML, str2); 
          
  
}
  
function init(s1, s2, s3, s4, s5) {
    document.getElementById("第一列").innerHTML = s1.replace(/\r\n/g,"<p>");     
    document.getElementById("第二列").innerHTML = s2.replace(/\r\n/g,"<p>");     
    document.getElementById("第三列").innerHTML = s3.replace(/\r\n/g,"<p>");
    document.getElementById("第四列").innerHTML = s4.replace(/\r\n/g,"<p>");
    document.getElementById("第五列").innerHTML = s5.replace(/\r\n/g,"<p>");
      
}
  
function setElementFocus(name) {
    var obj = document.getElementById(name);
    if(obj != null) {
        obj.focus();
        setFocus(obj);
        location.href = "#" + name;
    }
}
</script>
  
</html>
斯洛文尼亚旅游 2017-07-11
  • 打赏
  • 举报
 回复
引用 6 楼 qq_19238141 的回复:
[quote=引用 5 楼 showbo 的回复:] 不替换br就行了 String.prototype.stripHTML = function () { var reTag = /<\/?(?!br)[^>]*>/ig; return this.replace(reTag, " "); }
版主，替换代码后还是不行，只要粘贴，原有的多个段落就变成一个了。[/quote]自己用浏览器开发工具看换行是什么，不同浏览器可能不一样，我这里firefox是br，如果你的是其他，自己保留对于的标签，如div什么的，自己修改下正则
qq_19238141 2017-07-11
  • 打赏
  • 举报
 回复
引用 5 楼 showbo 的回复:
不替换br就行了 String.prototype.stripHTML = function () { var reTag = /<\/?(?!br)[^>]*>/ig; return this.replace(reTag, " "); }
版主，替换代码后还是不行，只要粘贴，原有的多个段落就变成一个了。
斯洛文尼亚旅游 2017-07-11
  • 打赏
  • 举报
 回复
不替换br就行了 String.prototype.stripHTML = function () { var reTag = /<\/?(?!br)[^>]*>/ig; return this.replace(reTag, " "); }
qq_19238141 2017-07-11
  • 打赏
  • 举报
 回复
引用 2 楼 showbo 的回复:
onpaste事件中去掉 
 <script>
                    String.prototype.stripHTML = function () { var reTag = /<(?:.|\s)*?>/g; return this.replace(reTag, " "); }
                    function divOnPaste(d) { setTimeout(function () { d.innerHTML = d.innerHTML.stripHTML(); }, 10); }
                </script>
                <div id="第一列" onpaste="divOnPaste(this)" contenteditable="true" onblur="    setBlur(this, '第一列-表A-窗口A')" onfocus="    setFocus(this, '第一列-表A');">绑定表A第一列</div>
                <div id="第二列" onpaste="divOnPaste(this)" contenteditable="true" onblur="setBlur(this,'第二列-表A-窗口A')" onfocus="setFocus(this,'第二列-表A');">绑定表A第二列</div>
                <div id="第三列" onpaste="divOnPaste(this)" contenteditable="true" onblur="setBlur(this,'第三列-表A-窗口A')" onfocus="setFocus(this,'第三列-表A');">绑定表A第三列</div>
                <div id="第四列" onpaste="divOnPaste(this)" contenteditable="true" onblur="setBlur(this,'第四列-表A-窗口A')" onfocus="setFocus(this,'第四列-表A');">绑定表A第四列</div>
                <div id="第五列" onpaste="divOnPaste(this)" contenteditable="true" onblur="setBlur(this,'第五列-表A-窗口A')" onfocus="setFocus(this,'第五列-表A');">绑定表A第五列</div>
版主老大，出个问题，就是粘贴以后，把div中原有的段落也清除了。应该怎样修改一下代码？
qq_19238141 2017-07-11
  • 打赏
  • 举报
 回复
引用 7 楼 showbo 的回复:
[quote=引用 6 楼 qq_19238141 的回复:] [quote=引用 5 楼 showbo 的回复:] 不替换br就行了 String.prototype.stripHTML = function () { var reTag = /<\/?(?!br)[^>]*>/ig; return this.replace(reTag, " "); }
版主，替换代码后还是不行，只要粘贴，原有的多个段落就变成一个了。[/quote]自己用浏览器开发工具看换行是什么，不同浏览器可能不一样，我这里firefox是br，如果你的是其他，自己保留对于的标签，如div什么的，自己修改下正则[/quote] 版主，从下午试到现在，也没能改对。也没找到IE中的换行符是什么。您的这句话“如果你的是其他，自己保留对于的标签，如div什么的，自己修改下正则”也没有理解。请版主再指教！ 谢谢！
qq_19238141 2017-07-07
  • 打赏
  • 举报
 回复
引用 2 楼 showbo 的回复:
onpaste事件中去掉 
 <script>
                    String.prototype.stripHTML = function () { var reTag = /<(?:.|\s)*?>/g; return this.replace(reTag, " "); }
                    function divOnPaste(d) { setTimeout(function () { d.innerHTML = d.innerHTML.stripHTML(); }, 10); }
                </script>
                <div id="第一列" onpaste="divOnPaste(this)" contenteditable="true" onblur="    setBlur(this, '第一列-表A-窗口A')" onfocus="    setFocus(this, '第一列-表A');">绑定表A第一列</div>
                <div id="第二列" onpaste="divOnPaste(this)" contenteditable="true" onblur="setBlur(this,'第二列-表A-窗口A')" onfocus="setFocus(this,'第二列-表A');">绑定表A第二列</div>
                <div id="第三列" onpaste="divOnPaste(this)" contenteditable="true" onblur="setBlur(this,'第三列-表A-窗口A')" onfocus="setFocus(this,'第三列-表A');">绑定表A第三列</div>
                <div id="第四列" onpaste="divOnPaste(this)" contenteditable="true" onblur="setBlur(this,'第四列-表A-窗口A')" onfocus="setFocus(this,'第四列-表A');">绑定表A第四列</div>
                <div id="第五列" onpaste="divOnPaste(this)" contenteditable="true" onblur="setBlur(this,'第五列-表A-窗口A')" onfocus="setFocus(this,'第五列-表A');">绑定表A第五列</div>
非常荣幸得到版主的指教，问题解决，谢谢！
斯洛文尼亚旅游 2017-07-07
  • 打赏
  • 举报
 回复
onpaste事件中去掉 
 <script>
                    String.prototype.stripHTML = function () { var reTag = /<(?:.|\s)*?>/g; return this.replace(reTag, " "); }
                    function divOnPaste(d) { setTimeout(function () { d.innerHTML = d.innerHTML.stripHTML(); }, 10); }
                </script>
                <div id="第一列" onpaste="divOnPaste(this)" contenteditable="true" onblur="    setBlur(this, '第一列-表A-窗口A')" onfocus="    setFocus(this, '第一列-表A');">绑定表A第一列</div>
                <div id="第二列" onpaste="divOnPaste(this)" contenteditable="true" onblur="setBlur(this,'第二列-表A-窗口A')" onfocus="setFocus(this,'第二列-表A');">绑定表A第二列</div>
                <div id="第三列" onpaste="divOnPaste(this)" contenteditable="true" onblur="setBlur(this,'第三列-表A-窗口A')" onfocus="setFocus(this,'第三列-表A');">绑定表A第三列</div>
                <div id="第四列" onpaste="divOnPaste(this)" contenteditable="true" onblur="setBlur(this,'第四列-表A-窗口A')" onfocus="setFocus(this,'第四列-表A');">绑定表A第四列</div>
                <div id="第五列" onpaste="divOnPaste(this)" contenteditable="true" onblur="setBlur(this,'第五列-表A-窗口A')" onfocus="setFocus(this,'第五列-表A');">绑定表A第五列</div>
NANU-NANA 2017-07-07
  • 打赏
  • 举报
 回复
没看懂
js过滤HTML标签以及 
本文介绍了一种使用JavaScript正则表达式去除HTML标签的方法，包括<和>的匹配，以及如何处理特殊字符如&nbps;。通过具体代码示例，详细解释了每个正则表达式的功能。
java 去除html标签
这段代码展示了如何从HTML字符串中删除标签、脚本和样式，以提取纯文本内容。通过正则表达式过滤HTML、script及style标签，并去除空格，确保只保留文本。
Html中嵌入JS代码的三种方式
本文详细介绍了在HTML中嵌入JavaScript的三种常见方式：直接在HTML标签中使用onclick属性，通过脚本块内嵌JS代码，以及引用外部JS文件。每种方式的执行时机和适用场景都有具体说明。
js去掉html标签
本文介绍如何在JSP文件中，利用JavaScript和正则表达式去除HTML标签内的样式，以实现从富文本编辑器获取纯文本内容的过程。通过示例代码展示了具体的实现方法。
JS-01-在HTML中嵌入JavaScript代码的三种方式
本文详细介绍了在HTML中嵌入JavaScript的三种方法：1) 通过事件句柄，例如onclick，实现交互功能；2) 使用内部脚本块直接在HTML中编写JS代码；3) 引入外部.js文件。文中还讨论了JavaScript的执行原理，注释格式，以及脚本块的位置和执行顺序。此外，提到了alert函数会阻塞页面加载，并指出在引入外部JS文件后，可以额外编写内部JS代码。
JavaScript

87,990

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章