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

Question

我试图在有人写@NameHere 时创建一个link，但用我的实际代码它不起作用。代码不会将 $1 读取为 @ 之后的单词。如果我在代码后放置一个白色 space（如 /^@(.*?)/ig ），它会执行此操作，但随后它将读取标点符号作为所提及名称的一部分。如果没有白色 space (/^@(.*?)/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></strong>',
        '<a class="MLPrev" href="profile?id=" target="_blank">@</a>&nbsp;'
    ];
 
    for (var i =0;i<bb.length;i++) {
      text = text.replace(bb[i], bb_html[i]);
    }
     $('.previewDocument-text').html(text);
  });

Answer 1

看来您真正需要的是：

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

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

i 的使用是多余的，因此我已将其从匹配中删除。

请注意，我们也不会将匹配锚定到行的开头，因为如果标签出现在文本中间，那将不起作用。

您的替代者将成为：

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

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

这是一个工作片段：

<!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></strong>',
        '<a class="MLPrev" href="profile?id=" target="_blank">@</a>'
      ];

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

</body>
</html>

此外，此方法可确保标签在输入 时带有超链接 ，而不是强制用户在之后插入内容（例如 space 或标点符号）。因此，如果标签出现在行尾，它也可以工作。

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

Replace word starting with @ symbol with jQuery

html

jquery

parsing

replace

html-parsing