如何使此字符串替换代码与`<br/>`标签一起使用?

第一卷

从一个在这里问到的有关将字符串中的普通文本替换为URL的问题....如果链接文本被<br/>标签包围,我想使其正常工作

这是我到目前为止使用的代码,它在看起来是超链接的元素内“链接”文本:

function linkify(inputText) {
    var replacedText, replacePattern1, replacePattern2, replacePattern3;

    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

    return replacedText;
}

当然,问题是如果链接文本是这样的:

<p>Is this:<br/><br/>http://www.google.com<br/><br/>THE best search engine around?</p>

然后我得到的输出就是这个!

<p>Is this:<a href="http://www.google.com">http://www.google.comTHE</a> best search engine around</p>

因此,有两个问题是<br/>标记被完全剥离,并且<br/>标记后的文本(“ THIS”)被视为超链接文本的一部分。

我该如何克服这个小而致命的问题?

阿德内

我会依靠很多更多的内置解析能力的浏览器,让浏览器找出什么是有效的HTML等。

这样的事情应该工作

function linkify(inputText) {

  var dom = new DOMParser(),
      doc = dom.parseFromString('<div id="wrap">'+ inputText +'</div>', 'text/html'),
      ref = doc.getElementById('wrap'),
      reg = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi,
      arr = [];

  Array.prototype.forEach.call(ref.querySelectorAll('*'), function(node) {
    Array.prototype.forEach.call(node.childNodes, function(innerNode) {
      if (innerNode.nodeType === 3) arr.push(innerNode);
    });
  });

  arr.forEach(function(node, index) {
    node.nodeValue = node.nodeValue.replace(reg, function(x) {
      var nxtNode = arr[index+1],
          anchor  = doc.createElement('a');

      if (nxtNode && "nodeValue" in nxtNode) {
        anchor.href = x;
        anchor.innerHTML = nxtNode.nodeValue;
        nxtNode.parentNode.removeChild(nxtNode);
        node.parentNode.insertBefore(anchor, node);
        node.parentNode.removeChild(node);
      }
    });
  });

  return ref.innerHTML;
}

会回来

<p>
    <br><br>
    <a href="http://www.google.com">THE best search engine around</a>
    <br><br>
</p>`

保留所有休息时间,但将其放置在锚点之外

小提琴

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用PHP在字符串中用空格替换<br>

来自分类Dev

如何用javascript中字符串中的其他内容替换<br/>标签的多个实例?

来自分类Dev

常规-使用<br>显示字符串

来自分类Dev

如何使用 <br> 作为字符串在 jquery 中换行

来自分类Dev

php替换多个br标签

来自分类Dev

php替换多个br标签

来自分类Dev

如何在Angularjs中一起使用nl2br和linky过滤器?

来自分类Dev

如何使用CSS模拟多个<br/>标签

来自分类Dev

如何从Textarea删除<br/>标签?

来自分类Dev

我如何在字符串中使用br来正确显示带有html标签的字符串?

来自分类Dev

从文本框中获取的字符串中的<br>替换下一行

来自分类Dev

从字符串的开头和结尾删除BR标签

来自分类Dev

xpath通过<br>标签分割字符串

来自分类Dev

从字符串的开头和结尾删除BR标签

来自分类Dev

从字符串的末尾去除随机 <br> 标签

来自分类Dev

从 PHP 中的 XML 字符串中删除 <br /> 标签

来自分类Dev

如何使jsdoc与Django模板标签一起使用?

来自分类Dev

Vanilla JavaScript在字符串中一定数量的字符后附加<br>标签

来自分类Dev

使用.getElementByClassName将<strong>标签替换为<br />标签

来自分类Dev

在 nl2br 中使用 table 标签时如何避免不必要的 br 标签?

来自分类Dev

如何在每5个字之后将<br>标签放在一个长字符串中?

来自分类Dev

Android:替换<p>和<br />标签

来自分类Dev

替换beautifulsoup中的<p>和<br>标签

来自分类Dev

Android:替换<p>和<br />标签

来自分类Dev

用javascript替换多个<br>标签

来自分类Dev

用<br>分割,并避免在字符串中使用强标签

来自分类Dev

如何在MySQL中使用此字符串替换

来自分类Dev

如何使用Python在<br>标记之前和之后获取字符串

来自分类Dev

如何使用jQuery / javascript在br之后删除div中的文本字符串?

Related 相关文章

  1. 1

    使用PHP在字符串中用空格替换<br>

  2. 2

    如何用javascript中字符串中的其他内容替换<br/>标签的多个实例?

  3. 3

    常规-使用<br>显示字符串

  4. 4

    如何使用 <br> 作为字符串在 jquery 中换行

  5. 5

    php替换多个br标签

  6. 6

    php替换多个br标签

  7. 7

    如何在Angularjs中一起使用nl2br和linky过滤器?

  8. 8

    如何使用CSS模拟多个<br/>标签

  9. 9

    如何从Textarea删除<br/>标签?

  10. 10

    我如何在字符串中使用br来正确显示带有html标签的字符串?

  11. 11

    从文本框中获取的字符串中的<br>替换下一行

  12. 12

    从字符串的开头和结尾删除BR标签

  13. 13

    xpath通过<br>标签分割字符串

  14. 14

    从字符串的开头和结尾删除BR标签

  15. 15

    从字符串的末尾去除随机 <br> 标签

  16. 16

    从 PHP 中的 XML 字符串中删除 <br /> 标签

  17. 17

    如何使jsdoc与Django模板标签一起使用?

  18. 18

    Vanilla JavaScript在字符串中一定数量的字符后附加<br>标签

  19. 19

    使用.getElementByClassName将<strong>标签替换为<br />标签

  20. 20

    在 nl2br 中使用 table 标签时如何避免不必要的 br 标签?

  21. 21

    如何在每5个字之后将<br>标签放在一个长字符串中?

  22. 22

    Android:替换<p>和<br />标签

  23. 23

    替换beautifulsoup中的<p>和<br>标签

  24. 24

    Android:替换<p>和<br />标签

  25. 25

    用javascript替换多个<br>标签

  26. 26

    用<br>分割,并避免在字符串中使用强标签

  27. 27

    如何在MySQL中使用此字符串替换

  28. 28

    如何使用Python在<br>标记之前和之后获取字符串

  29. 29

    如何使用jQuery / javascript在br之后删除div中的文本字符串?

热门标签

归档