Fatal编程技术网
  • javascript/
  • JavaScript RegExp#hasgtag替换为html中没有超哈希链接的链接

JavaScript RegExp#hasgtag替换为html中没有超哈希链接的链接

javascript jquery html regex replace

JavaScript RegExp#hasgtag替换为html中没有超哈希链接的链接,javascript,jquery,html,regex,replace,Javascript,Jquery,Html,Regex,Replace,我想用JavaScript或jQuery将#hashtag文本替换为 在这里，我尝试： <!DOCTYPE html> <html> <body> <button onclick="myFunction()">Try it</button> <p id="demo">Please visit #Microsoft! #facebook <a href="#link"> Somelink</a>

我想用JavaScript或jQuery将
#hashtag
文本替换为

在这里，我尝试：

   <!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit #Microsoft! #facebook <a href="#link"> Somelink</a>
</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
   var txt = str.replace(/#\w+\.?\w+/g,"<a href=\"http://example.com?hashtag=selectedteg\">#Selected</a> ");
    document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>


试试看
请访问微软#脸谱网


函数myFunction（）{
var str=document.getElementById（“demo”）.innerHTML；
var txt=str.replace（/#\w+\.？\w+/g，”）；
document.getElementById（“demo”）.innerHTML=txt；
}
但是这个结果返回

<p id="demo">Please visit <a href="http://example.com?hashtag=selectedteg">#Selected</a> ! <a href="http://example.com?hashtag=selectedteg">#Selected</a>  <a href="&lt;a href=" http:="" example.com?hashtag="selectedteg&quot;">#Selected</a> "&gt; Somelink
</p>

请访问！“Somelink
我想成为这样的人

<p id="demo">Please visit <a href="http://example.com?hashtag=Microsoft">#Microsoft</a> ! <a href="http://example.com?hashtag=facebook">#facebook</a>  <a href="#link">Somelink</a>
</p>

请访问！
您需要捕获组，然后在替换中使用它。例如：

var txt = str.replace(/#(\w+\.?\w+)/g,"<a href=\"http://example.com?hashtag=$1\">#$1</a> ");
它利用了一个事实，即现有链接中的
#链接
不是由空格进行的。因此，您可以得到如下结果：

函数myFunction（）{
var str=document.getElementById（“demo”）.innerHTML；
var txt=str.replace（/\s（？！href=“）#（\s+）/g，”）；
document.getElementById（“demo”）.innerHTML=txt；
}
试试看
请访问微软#脸谱网
您需要捕获组，然后在替换中使用它。比如：

var txt = str.replace(/#(\w+\.?\w+)/g,"<a href=\"http://example.com?hashtag=$1\">#$1</a> ");
它利用了现有链接中的
#链接
不是由空格进行的这一事实。你会得到这样的结果：

函数myFunction（）{
var str=document.getElementById（“demo”）.innerHTML；
var txt=str.replace（/\s（？！href=“）#（\s+）/g，”）；
document.getElementById（“demo”）.innerHTML=txt；
}
试试看

请访问#Microsoft！#facebook
您必须捕获带括号的文本，但也必须仅捕获文本，而不是html标记中的内容。请参阅函数中的注释

函数hashtagReplace（）{
var text=document.getElementById（“demo”）.innerHTML；
//您必须首先捕获文本，以避免捕获示例中的#链接

//文本介于输入的开始或“>”和输入的结束之间，“您必须用括号捕获文本，但也必须仅捕获文本，而不是html标记中的内容。请参阅函数中的注释



函数hashtagReplace（）{
var text=document.getElementById（“demo”）.innerHTML；
//您必须首先捕获文本，以避免捕获示例中的#链接

//文本介于输入的开始或“>”和输入的结束之间，并且“哇！这是一个令人惊讶的难题，尽管乍一看应该很简单

问题是，严格地说，您的需求要求只处理文本节点来将hashtag转换为链接。不应该触及现有的HTML

天真的方法（见其他答案）将试图设计一个复杂的正则表达式来避开HTML。虽然这可能在某些情况下有效，甚至几乎在所有实际情况下都有效，但这绝对不是万无一失的。正则表达式的功能根本不足以完全解析HTML；它只是一种太复杂的语言。请参阅优秀且相当著名的堆栈溢出answ呃,至少,不可能做到完美,也不应该做到

相反，正确的方法是使用递归JavaScript函数遍历HTML树，并将所有目标文本节点替换为其自身的处理版本，重要的是，这可能涉及在文本节点内引入（非文本）HTML标记

jQuery可以用最小的复杂性来完成这项任务，尽管任务本身需要一定的复杂性，老实说，这是无法避免的

HTML
如您所见，对
text（）
的单个调用将获取纯文本节点的文本内容，然后调用string对象上的
replace（）
函数以用HTML替换任何hashtag，然后调用jQuery的
replaceWith（）
方法允许我们用生成的HTML替换整个文本节点，或者在未执行替换的情况下保留原始纯文本

工具书类

    

  • 

  • 

  • 

  • 

  • 

      哇！这是一个令人惊讶的难题，尽管乍一看似乎应该很简单
      
问题是，严格地说，您的需求要求只处理文本节点来将hashtag转换为链接。不应该触及现有的HTML
      
天真的方法（见其他答案）将试图设计一个复杂的正则表达式来避开HTML。虽然这可能在某些情况下有效，甚至几乎在所有实际情况下都有效，但这绝对不是万无一失的。正则表达式的功能根本不足以完全解析HTML；它只是一种太复杂的语言。请参阅优秀且相当著名的堆栈溢出answ呃,至少,不可能做到完美,也不应该做到
      
相反，正确的方法是使用递归JavaScript函数遍历HTML树，并将所有目标文本节点替换为其自身的处理版本，重要的是，这可能涉及在文本节点内引入（非文本）HTML标记
      
jQuery可以用最小的复杂性来完成这项任务，尽管任务本身需要一定的复杂性，老实说，这是无法避免的
      
HTML
如您所见，对
      text（）
      的单个调用将获取纯文本节点的文本内容，然后调用string对象上的
      replace（）
      函数以用HTML替换任何hashtag，然后调用jQuery的
      replaceWith（）
      方法允许我们用生成的HTML替换整个文本节点，或者在未执行替换的情况下保留原始纯文本
      
工具书类

        

      • 

        <button onclick="tryItClick()">Try it</button>
<p id="demo">Please visit #Microsoft! #facebook <a href="#link">Somelink</a>
</p>

        

        if (!window.Node) {
    window.Node = {
        ELEMENT_NODE                :  1,
        ATTRIBUTE_NODE              :  2,
        TEXT_NODE                   :  3,
        CDATA_SECTION_NODE          :  4,
        ENTITY_REFERENCE_NODE       :  5,
        ENTITY_NODE                 :  6,
        PROCESSING_INSTRUCTION_NODE :  7,
        COMMENT_NODE                :  8,
        DOCUMENT_NODE               :  9,
        DOCUMENT_TYPE_NODE          : 10,
        DOCUMENT_FRAGMENT_NODE      : 11,
        NOTATION_NODE               : 12
    };
} // end if

window.linkify = function($textNode) {
    $textNode.replaceWith($textNode.text().replace(/#(\w+\.?\w+)/g,'<a href="http://example.com?hashtag=$1">#$1</a>'));
}; // end linkify()

window.processByNodeType = function($cur, nodeTypes, callback, payload ) {
    if (!nodeTypes.length)
        nodeTypes = [nodeTypes];
    for (var i = 0; i < $cur.length; ++i) {
        if ($.inArray($cur.get(i).nodeType, nodeTypes ) >= 0)
            callback($cur.eq(i), $cur, i, payload );
        processByNodeType($cur.eq(i).contents(), nodeTypes, callback, payload );
    } // end for
} // end processByNodeType()

window.tryItClick = function(ev) {
    var $top = $('#demo');
    processByNodeType($top, Node.TEXT_NODE, linkify );
}; // end tryItClick()

        

        $textNode.replaceWith($textNode.text().replace(/#(\w+\.?\w+)/g,'<a href="http://example.com?hashtag=$1">#$1</a>'));