如何在 HTML 中找到以 space 或 < 结尾的主题标签？

Question

我想通过 Regex 在 HTML 中查找主题标签。

<div class="details">
  <p>#hashtag1 #hashtag2 #hashtag3</p>
  <p>#hashtag4 #hashtag5 #hashtag6</p>
  ...
</div>

当我使用这个正则表达式时：

var details = $('.details').html();
details = details.replace(/#(\S*)/g,'<a href="/?hashtag=">#</a>');
$('.details').html(details);

它returns:

<div class="details">
  <p>
    <a href="/?hashtag=hashtag1>#hashtag1</a>
    <a href="/?hashtag=hashtag2>#hashtag2</a>
    <a href="/?hashtag=hashtag3>#hashtag3</p></a>
  ...
</div>

我怎样才能得到这个？

<div class="details">
  <p>
    <a href="/?hashtag=hashtag1>#hashtag1</a>
    <a href="/?hashtag=hashtag2>#hashtag2</a>
    <a href="/?hashtag=hashtag3>#hashtag3</a>
  </p>
  ...
</div>

Answer 1

你可以使用这个模式/#\w+/g

var input = '<p>#hashtag1 #hashtag2 #hashtag3</p>';

console.log(input.match(/#\w+/g));

\w表示：单词字符是a-z、A-Z、0-9中的一个字符，包括_（下划线）字符。

更新：

var details = $('.details').html();
details = details.replace(/#(\w+)/g,'<a href="/?hashtag=">#</a>');
$('.details').html(details);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="details">
  <p>#hashtag1 #hashtag2 #hashtag3</p>
</div>

更新 2：

var details = $('.details').html();
var pattern = /#([\p{L}\p{N}]+)/gu;

details = details.replace(pattern,'<a href="/?hashtag=">#</a>');

$('.details').html(details);

// for testing
console.log(details.match(pattern));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="details">
  <p>#nguyễn1 #nhựt2 #tân3</p>
</div>

Answer 2

@Tân 给了我我想要的答案，但我找到了另一种方法来解决这个问题jQuery。

如果我像这样替换 javascript(jQuery) 部分：

var $targets = $('.details p');
$('.details p').each(function () {
  var text = $(this).text();
  text = text.replace(/#(\S*)/g,'<a href="/?hashtag=">#</a>');
  $(this).html(text);
});

这解决了问题。

如何在 HTML 中找到以 space 或 < 结尾的主题标签？

How to find hashtag in HTML which ends with space or <?

regex

hashtag