将以@符号开头的单词替换为jQuery-解网

问：

当有人编写@NameHere时，我正在尝试创建一个链接，但使用我的实际代码它不起作用。该代码不会将 $1 读取为 @ 之后的单词。如果我在代码（like ）后面放置一个空格，它会这样做，但随后它会将标点符号作为所提及名称的一部分。如果没有空格（），则不会读取该单词。/^@(.*?)/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">@$1</a>&nbsp;'
    ];
 
    for (var i =0;i<bb.length;i++) {
      text = text.replace(bb[i], bb_html[i]);
    }
     $('.previewDocument-text').html(text);
  });

jQuery 解析替换 HTML 解析

<!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">@$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>

此外，这种方法可确保在键入时标记是超链接的，而不是强制用户在之后插入某些内容（例如空格或标点符号）。因此，如果标签出现在行的末尾，它也会起作用。

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

Replace word starting with @ symbol with jQuery

评论

评论