在textarea中替换正则表达式字符串html标记

时间:2017-07-14 13:20:11

标签: javascript jquery regex string textarea

Hai我怎么能在textarea值中替换Regex string html标签 使用全局属性html 示例textarea值

  

<p style="color:red" id="demo1" class="demo1">text</p>

  

<p style="color:red">text</p>

.replace(/<p[^>]*>(.*?)<\/p>/g, "xxxxxxxxxxxxxxx")

xxxxxxxxxxxxxxx

的价值如何?

我是这个jQuery代码的用户:

 $("button").on('click', function() {
    var text = $('#demo').val();
    if ( text.match() ){      
        text = text
        .replace(/\<br\s*[\/]?>/g, "<br/>")
        .replace(/\<hr\s*[\/]?>/g, "<hr/>")
        .replace(/\<\/p><p>/g, "</p>\n\n<p>")
        
        // this my problem with all attribute
        // example for <p style="color:red" id="demo1" class="demo1">text</p>
        
        /*
        .replace(/<p[^>]*>(.*?)<\/p>/g, "<p[^>]*>\n$1<\/p>\n")
        */
        ;
        return $('#demo').val(text);
    }
});
textarea {
    width: 80%;
    height: 150px;
}
code {
  color :red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="demo">
<p>Lorem ipsum dolor sit amet</p><p>Lorem ipsum dolor sit amet</p><p>Lorem ipsum dolor <br><br><br><br><br><br><br>sit amet</p><hr><hr><hr><hr><hr><hr><hr><hr><hr><p style="color:red" id="demo1" class="demo1">Lorem ipsum dolor sit amet</p>
</textarea>

<p>
  <button>REPLACE</button>
</p>

<pre>
1. <code>&lt;br&gt;</code> to <code>&lt;br/&gt;</code>  = ok
2. <code>&lt;hr&gt;</code> to <code>&lt;hr/&gt;</code> = ok
3. <code>&lt;/p&gt;&lt;p&gt;</code> to <code>&lt;/p&gt;\n\n&lt;p&gt;</code> = ok
</pre>

提前谢谢。 抱歉,我的英语不好

2 个答案:

答案 0 :(得分:0)

尝试: (<([a-zA-Z]\w*\s)[^>]*>).*?<\/\2>

Js例子:

str.replace(/(<([a-zA-Z]\w*\s)[^>]*>).*?<\/\2>/g, "$1REPLACEMENT</$2>")

打破这个局面:

(            // Start capture group number 1
<            // Match literal opening < of tag
(            // Start capture group number 2
[a-zA-Z]\w*\s  // Match alpha char followed by 0 or more alphanumeric, followed by a space chars (i.e. HTML tag)
)            // End capture group 2
[^>]*        // Match ANYTHING that is not a literal '>' (i.e. rest of opening tag
>            // Match literal closing > of tag
)            // End capture group 1
.*?          // Match ANYTHING until...
<\/\2>       // Match closing tag using backreference to the opening tag from capture group 2

因此,当成功匹配时,我们有2个填充的捕获组:

1:匹配整个开头标记,包括它的内容

2:仅匹配标签本身

所以我们的替换模式可以是:$1REPLACEMENT</$2>

注意:如果在HTML上使用相同类型的嵌套标签,则会中断。使用regexp解析HTML是非常困难的,理想情况下你会使用HTML解析器,但对于小用例,它是可以接受的。

// Will work
<p>foo</p> => <p>REPLACEMENT</p>
<div class="asdfa">aslkdgladshg</div> => <div class="asdfa">REPLACEMENT</div>
<div class="asfs"><p>asdgaga</p></div> => <div class="asfs">REPLACEMENT</div>

// Won't work (note nested div)
<div class="asdgfasd"><div>asd kbgasdbk</div></div> => <div class="asdgfasd">REPLACEMENT</div>

答案 1 :(得分:0)

我认为您正在寻找.replace(/(<p[^>]*>)(.*?)(<\/p>)/g, "\1\n\2\3\n")。您只需要捕获开始标记及其类。