用jQuery替换以@符号开头的单词

debugcn 发表于 Dev

埃琳娜

当有人写@NameHere时，我试图创建一个链接，但是用我的实际代码不起作用。代码不会读取$ 1作为@后面的单词。如果我在代码后放置一个空格（如/^@(.*?)/ig ），则可以，但是它将读取标点符号作为上述名称的一部分。如果留有空白（/^@(.*?)/ig），它将不会读取该单词。

我一直在尝试解决问题，但不知道如何解决。

https://jsfiddle.net/ElenaMcDowell/pebjtwrz/79/

<div class="previewDocument-box">
    <h1>Preview</h1>
    <div class="previewDocument-text"></div>
</div>
<textarea id="ECEditor" class="editor-textarea" style="height: 200px;" name="editor-text"></textarea>

$('#ECEditor').on('input', function() {
     var text = $(this).val();
     var bb =  [
            /\[b\](.*?)\[\/b\]/ig,
        /^@(.*?)/ig
        
    ];
    
    var bb_html = [
            '<strong>$1</strong>',
        '<a class="MLPrev" href="profile?id=$1" target="_blank">@$1</a>&nbsp;'
    ];
 
    for (var i =0;i<bb.length;i++) {
      text = text.replace(bb[i], bb_html[i]);
    }
     $('.previewDocument-text').html(text);
  });

肋前缘

看来您实际需要的是以下内容：

/@(\w+)(\b)/g

这将匹配一系列“单词”字符，后跟“单词边界”（本质上是非单词字符，例如空格或标点符号或行尾）。

的使用i是多余的，因此我从比赛中将其删除。

请注意，我们也不会将匹配项锚定到行首，因为如果标记出现在文本中间，则该匹配项将不起作用。

您的替代品将变为：

'<a class="MLPrev" href="profile?id=$1" target="_blank">@$1</a>$2'

（这是相同的，除了我们不插入不间断空格，而是在标签后插入任何字符-无论是空格还是标点符号，还是其他“非单词”字符）。

这是一个工作片段：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>

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

  <div class="previewDocument-box">
    <h1>Preview</h1>
    <div class="previewDocument-text"></div>
  </div>

  <textarea id="ECEditor" class="editor-textarea" style="height: 200px;" name="editor-text"></textarea>

  <script type="text/javascript">
    $('#ECEditor').on('input', function() {
      let text = $(this).val();
      const bb = [
        /\[b\](.*?)\[\/b\]/g,
        /@(\w+)(\b)/g
      ];

      const bb_html = [
        '<strong>$1</strong>',
        '<a class="MLPrev" href="profile?id=$1" target="_blank">@$1</a>$2'
      ];

      for (let i = 0; i < bb.length; i++) {
        text = text.replace(bb[i], bb_html[i]);
      }
      $('.previewDocument-text').html(text);
    });
  </script>

</body>
</html>

同样，此方法可确保在键入时使标签超链接，而不是强迫用户随后插入某些内容（例如空格或标点符号）。因此，如果标签出现在行尾，它也将起作用。

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

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